I have an annoying problem with the XY Chart, where my column series doesn't start and stop at the correct timestamps.
I have posted a picture of my chart, inside the tooltip is reads the Start (23:00) and End (23:15), which is the data that i have inside each of my datasource. The problem is that the column starts at the correct location, but the end value overshoots into the center of the grid cell. That why i have the cellEndLocation in my header.
Does anyone know how i can fix this.
I have posted the Json for the series setup, one with the complete JSON (Series Raw) and one where i have removed Line, StepLine and CandleStick, called (Series only with Column)
Series Raw
{
"name": "Test",
"label": {
"text": "Test"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "Test",
"x": "StopTime",
"y": "endY"
},
"xAxis": "time",
"yAxis": "value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "[bold]Test[/] {StartTime.formatDate(\"HH:mm\")} → {StopTime.formatDate(\"HH:mm\")} Value: {Effect} Stack: {offsetY} → {endY}",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "column",
"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": "StartTime",
"y": "offsetY"
},
"appearance": {
"fill": {
"color": "#DB0D0D",
"opacity": 1
},
"stroke": {
"color": "#4A4A4A",
"opacity": 1,
"width": 1
},
"width": null,
"height": null,
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "StartTime",
"y": "offsetY"
},
"appearance": {
"connect": false,
"tensionX": 0,
"tensionY": 0,
"minDistance": 0,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 1
},
"bullets": [{
"enabled": false,
"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": false,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 1
},
"bullets": [{
"enabled": true,
"render": "circle",
"width": 1000,
"height": 100,
"label": {
"text": "{Effect}",
"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": ""
}
}]
}
}
}
Series only with Column
{
"name": "Test",
"label": {
"text": "Test"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "Test",
"x": "StopTime",
"y": "endY"
},
"xAxis": "time",
"yAxis": "value",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "[bold]Test[/] {StartTime.formatDate(\"HH:mm\")} → {StopTime.formatDate(\"HH:mm\")} Value: {Effect} Stack: {offsetY} → {endY}",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "column",
"column": {
"open": {
"x": "StartTime",
"y": "offsetY"
},
"appearance": {
"fill": {
"color": "#DB0D0D",
"opacity": 1
},
"stroke": {
"color": "#4A4A4A",
"opacity": 1,
"width": 1
},
"width": null,
"height": null,
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
}
}
I have also included the setup for each axies.
yAxes
{
"name": "value",
"label": {
"enabled": true,
"text": "Service Load",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"format": "M/d/yyyy HH:mm:ss"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 0.25,
"dashArray": "",
"minDistance": null,
"position": 0
},
"font": {
"size": 12,
"weight": 400
}
}
}
xAxes
{
"name": "time",
"label": {
"enabled": true,
"text": "Time",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "date",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "minute",
"count": 15,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "yyyy-MM-dd HH:mm:ss",
"format": "HH:mm"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": 15,
"position": 0
},
"font": {
"size": 12,
"weight": 400
}
}
}