Dears,
I need to shift the x-axis label or find a way that the time appear just under the right bar .
check this photo below to get what I mean :
What component is that? Is it a Time Series chart?
it is xy chart
I think there's something else wrong. Users shouldn't have to do that and if it fixed the problem for this instance it would break if the x-axis time range changes to a different number of days.
1 Like
Please copy the chart from the Project Browser and paste it in here. Be sure to format it as code using the </> button. You may need to disable the dataSources bindings so that we get data rather than just the binding configuration and no data. (You could test by pasting into a new view to make sure it all renders correctly.)
1 Like
[
{
"type": "ia.chart.xy",
"version": 0,
"props": {
"title": {
"appearance": {
"color": "#FFFFFF",
"font": {
"weight": 12
},
"padding": {
"bottom": 15
}
}
},
"subtitle": {
"appearance": {
"color": "#FFFFFF"
}
},
"legend": {
"position": "top",
"markers": {
"width": 10,
"height": 10
},
"labels": {
"text": "{name}[/]",
"font": {
"size": 12,
"color": "#FFFFFF"
}
}
},
"enableTransitions": true,
"scrollBars": {
"horizontal": {
"enabled": false
},
"vertical": {
"enabled": false
}
},
"selection": {
"enabled": true
},
"background": {
"render": "color",
"gradient": {
"direction": "radial"
},
"color": "#C0C0C000"
},
"xAxes": [
{
"name": "datetime",
"label": {
"enabled": true,
"text": "datetime",
"color": "#FFFFFF"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"render": "date",
"category": {
"break": {
"enabled": false,
"startCategory": 0,
"endCategory": 1,
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": true,
"timeUnit": "hour",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "M/d/yyyy HH:mm:ss",
"format": "d/M HH:mm:ss"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 1,
"endValue": 54,
"size": 1
},
"format": "#,###"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#FFFFFF",
"opacity": 1,
"rotation": 90,
"verticalCenter": "top",
"horizontalCenter": "left"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": 20,
"position": 1
},
"font": {
"size": "",
"weight": 500
}
}
},
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": 20,
"opacity": 1,
"position": 1
},
"inside": false,
"labels": {
"color": "#FFFFFF",
"horizontalCenter": "left",
"opacity": 1,
"rotation": 90,
"verticalCenter": "top"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": 1,
"size": 0.05,
"startCategory": 0
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": true,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "d/M HH:mm:ss",
"inputFormat": "M/d/yyyy HH:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "#FFFFFF",
"enabled": true,
"text": "datetime"
},
"name": "datetime2",
"render": "date",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 54,
"size": 1,
"startValue": 1
},
"format": "#,###",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
],
"yAxes": [
{
"name": "Pallet",
"label": {
"enabled": true,
"text": "Cases Prodcution Per Month",
"color": "#FFFFFF"
},
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"inversed": false,
"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": 300,
"min": 0,
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#.0a"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "#FFFFFF",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
},
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": null,
"opacity": 1,
"position": 0.5
},
"inside": false,
"labels": {
"color": "#FFFFFF",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": true
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "#FFFFFF",
"enabled": true,
"text": "Cases Prodcution Per Month"
},
"name": "Pallet2",
"render": "value",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#.0a",
"logarithmic": false,
"range": {
"max": 300,
"min": 0,
"useStrict": false
}
},
"visible": true
},
{
"appearance": {
"font": {
"size": "",
"weight": 500
},
"grid": {
"color": "",
"dashArray": "",
"minDistance": null,
"opacity": 1,
"position": 0.5
},
"inside": false,
"labels": {
"color": "#6FCDED",
"horizontalCenter": "middle",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle"
},
"opposite": false
},
"category": {
"break": {
"enabled": false,
"endCategory": "",
"size": 0.05,
"startCategory": ""
}
},
"date": {
"baseInterval": {
"count": 1,
"enabled": false,
"skipEmptyPeriods": false,
"timeUnit": "hour"
},
"break": {
"enabled": false,
"endDate": "",
"size": 0.05,
"startDate": ""
},
"format": "M/d/yyyy HH:mm:ss",
"inputFormat": "yyyy-MM-dd kk:mm:ss",
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"inversed": false,
"label": {
"color": "#6FCDED",
"enabled": true,
"text": "Capacity Percentage"
},
"name": "Percent",
"render": "value",
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": ""
},
"value": {
"break": {
"enabled": false,
"endValue": 100,
"size": 0.05,
"startValue": 0
},
"format": "#,###.##",
"logarithmic": false,
"range": {
"max": "",
"min": "",
"useStrict": false
}
},
"visible": true
}
],
"series": [
{
"name": "",
"label": {
"text": "FG Pallets production rate per hour"
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "ds_Total",
"x": "datetime",
"y": "Pallet"
},
"xAxis": "datetime",
"yAxis": "Pallet",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{dateX.formatDate('dd/MM/yyyy HH:mm')}: [Bold]{valueY.formatNumber(\"#,###.0\")}[/] Pallets",
"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": "",
"y": ""
},
"appearance": {
"fill": {
"color": "#EC4B3D",
"opacity": 1
},
"stroke": {
"color": "#EC4B3D",
"opacity": 0.5,
"width": 1
},
"stacked": true,
"width": 30,
"height": 50,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "#8B1919",
"min": "#FFE8CC",
"dataField": "Cons"
}
}
},
"line": {
"open": {
"x": "Month",
"y": "Cons"
},
"appearance": {
"connect": false,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "#00FFFF",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY} {valueX}[/] cases",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"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": {
"opacity": 0,
"color": ""
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"rotation": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "#0000FF",
"opacity": 1
},
"heatRules": {
"dataField": "Cons",
"enabled": false,
"max": "#8B1919",
"min": "#FFE8CC"
},
"height": 50,
"stacked": true,
"stroke": {
"color": "#0000FF",
"opacity": 0.5,
"width": 1
},
"width": 30
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "Shipping_out",
"x": "datetime",
"y": "Pallet"
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "FG Pallets shipping rate per hour"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "#00FFFF",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY} {valueX}[/] cases"
},
"width": 10
}
],
"connect": false,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "Month",
"y": "Cons"
}
},
"name": "",
"render": "column",
I was not able to put the chart even after deleting the bindings in a one comment ,Thats is why i divided it in two comments.
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY}[/]"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{dateX.formatDate('dd/MM/yyyy HH:mm')}: [Bold]{valueY.formatNumber(\"#,###.0\")}[/] Pallets"
},
"visible": true,
"xAxis": "datetime",
"yAxis": "Pallet2",
"zIndex": 0
},
{
"candlestick": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": "",
"min": ""
},
"stacked": false,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
}
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"open": {
"x": "",
"y": ""
}
},
"column": {
"appearance": {
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"fill": {
"color": "#EC4B3D",
"opacity": 1
},
"heatRules": {
"dataField": "Cons",
"enabled": false,
"max": "#8B1919",
"min": "#FFE8CC"
},
"height": 50,
"stacked": true,
"stroke": {
"color": "#EC4B3D",
"opacity": 1,
"width": 1
},
"width": 30
},
"open": {
"x": "",
"y": ""
}
},
"data": {
"source": "Percentage",
"x": 0,
"y": 1
},
"defaultState": {
"visible": true
},
"hiddenInLegend": false,
"label": {
"text": "Percentage"
},
"line": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "#00FFFF",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{name}: [bold]{valueY} {valueX}[/] cases"
},
"width": 10
}
],
"connect": false,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": 0,
"y": 1
}
},
"name": "Percentage",
"render": "step line",
"stepLine": {
"appearance": {
"bullets": [
{
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"rotation": "",
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"enabled": true,
"fill": {
"color": "",
"opacity": 1
},
"heatRules": {
"dataField": "",
"enabled": false,
"max": 100,
"min": 2
},
"height": 10,
"label": {
"position": {
"dx": 0,
"dy": 0
},
"text": "{value}"
},
"render": "circle",
"rotation": 0,
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{dateX.formatDate('dd/MM/yyyy HH:mm')}: [bold]{valueY}[/] %"
},
"width": 10
}
],
"connect": true,
"fill": {
"color": "",
"opacity": 0
},
"minDistance": 0.5,
"stroke": {
"color": "",
"dashArray": "",
"opacity": 1,
"width": 3
},
"tensionX": 1,
"tensionY": 1
},
"open": {
"x": "",
"y": ""
}
},
"tooltip": {
"background": {
"color": "",
"opacity": 1
},
"cornerRadius": 3,
"enabled": true,
"pointerLength": 4,
"text": "{dateX.formatdate(\" \"YYYY-MM-DD hh:mm:ss\"\")}: [Bold]{valueY.formatNumber(\"#,###.0\")}[/] Cases"
},
"visible": true,
"xAxis": "datetime",
"yAxis": "Percent",
"zIndex": 0
}
],
"style": {
"backgroundColor": "#FFFFFF00",
"marginLeft": 10,
"paddingLeft": 20
},
"dataSources": {}
},
"meta": {
"name": "XYChart_1"
},
"position": {},
"custom": {}
}
]
dataSources at the bottom of your second post is empty.
Try copying just the dataSources property into a post and see if you get data.
1 Like
That text file contains the bindings and no data.
1 Like
I'm able to reproduce the XY Chart now, thanks.
I suspect that rotate : 90 is rotating the label about the top left corner of the label and this is swinging it to the left of the rotation point. The XY Chart is based on AM Charts components and you can find some of the relevant documentation here:
https://www.amcharts.com/docs/v4/concepts/axes/positioning-axis-elements/#Label_rotation
I can't see a way to modify the verticalCenter property through the XY Chart properties though.
@Ahmed_mohamed's solution may be the best workaround for now.
Comments:
- You can delete
xAxes.1as it's not used. - You can clean up the Percent graph by making the bullets transparent.
series.2.appearance.bullets.0.fill.opacity : 0
series.2.appearance.bullets.0.stroke.opacity : 0
You need to leave them enabled if you wan the tooltip to appear.
You might be interested in some tooltip formatting that I figured out and shared in Perspective XY Chart xAxes tooltip text {dateX}.
3 Likes