Hi Team,
I have used XY Chart ,here the difference in data values between both is minimal, but the heights of the bars differ significantly.
Thank you in advance
Come on! Post the configuration! How can anyone help otherwise?
Right-click on the component, copy, paste it in here and format it using the
</> button.
If the data is from a binding then copy and paste the data in separately (and format that too).
I have used this series
Kindly let me know if you need anyother configuration
[
{
"name": "Downtime reason",
"label": {
"text": "Target"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "iReason",
"y": "iPlanMins"
},
"xAxis": "iReason",
"yAxis": "iMins",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "[bold]{valueY}[/] ",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "#D9D900",
"opacity": 1
}
},
"render": "line",
"candlestick": {
"open": {
"x": "",
"y": ""
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": 0,
"y": 0
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": 25,
"height": null,
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "#000080",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
},
{
"name": "",
"label": {
"text": "Actual"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "example",
"x": "iReason",
"y": "iMins"
},
"xAxis": "iReason",
"yAxis": "iMins",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "[bold]{valueY}[/] ",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "line",
"candlestick": {
"open": {
"x": "",
"y": ""
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": 0,
"y": 0
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": 25,
"height": null,
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "#00AC00",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
}
]
Hi ,
I have attached the binding . Is there any solution ?
Thanks in advance
I wasn't able to recreate the exact XY chart with the data you provided. However, if you're aiming to set the column height to an absolute value, you can achieve this by setting yAxes.[x].value.range.min to 0 (define a min range), as shown below:
1 Like
Hi ,
I tried your method, but it didn't work. The values still go beyond the chart limits, and even though the difference between the target and actual values is small, their heights are very different.
Thank you
The yAxes is render as value in the example I posted. Can you verify this setting in your chart, Otherwise post the chart component with sample data.
Hi ,
I have attached the binding with sample data
[
{
"type": "ia.display.view",
"version": 0,
"props": {
"path": "Page/Dashboard/OEE Dashboard/APQ/DayPerformance",
"params": {
"PieData": [],
"gauge2": {
"arcBackgroundColor": "#d9dadb",
"arcColorGradient1": "#12EBCE",
"arcColorGradient2": "#00a6e2",
"label": "Availability",
"maxValue": 100,
"unit": "%",
"value": 0
}
}
},
"meta": {
"name": "Performance"
},
"position": {
"grow": 1,
"basis": "320px"
},
"custom": {},
"propConfig": {
"props.params.PerformanceGraph": {
"binding": {
"type": "query",
"config": {
"queryPath": "Page/Dashboard/OEE Dashboard/getHourlyPlanVsActual",
"parameters": {
"dop": "{view.custom.formatdate}",
"EquipmentID": "{view.params.EquipmentID}"
}
}
}
}
}
}
]