# XY Chart adjusting cell width cellEndLocation?

**URL:** <https://forum.inductiveautomation.com/t/xy-chart-adjusting-cell-width-cellendlocation/115638>\
**Category:** Ignition\
**Tags:** ignition83, perspective\
**Created:** [May 21, 2026, 12:52pm UTC](https://forum.inductiveautomation.com/t/xy-chart-adjusting-cell-width-cellendlocation/115638 "2026-05-21T12:52:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcl](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mcl](https://forum.inductiveautomation.com/u/mcl)\
**Post date:** [May 21, 2026, 12:52pm UTC](https://forum.inductiveautomation.com/t/xy-chart-adjusting-cell-width-cellendlocation/115638/1 "2026-05-21T12:52:45Z")

</div>

I have an annoying problem with the XY Chart, where my column series doesn't start and stop at the correct timestamps.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/6568039ad09f4d77d285eee46b948192a21aaa9a.png)

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**
>
> ```json
> {
> "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**
>
> ```json
> {
> "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**
>
> ```json
> {
> "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**
>
> ```json
> {
> "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
> }
> }
> }
> 
> ```