Currently, I am utilizing the high charts library to display a date-time column chart. However, there seems to be an issue with the x-axis not displaying the exact starting value for the chart. In the example provided below, it is necessary to adjust the bar width before the 12th NOV x-axis value.
chart: {
type: 'column',
width : 709,
marginTop : 100,
reflow: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ["#00ACE6", "#EA8939", "#2D8093", "#EB5C6A", "#D9A300", "#1B7CDE", "#8D69E0", "#378A4E", "#4F5A65"],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
yAxis: {
allowDecimals: false,
min: 0,
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
animation: false
}
},
series:[{"name":"sent","data":[],"stack":"sent","_colorIndex":0},{"name":" received","data":[],"stack":"received","_colorIndex":1},{"name":"1 sent","data":[[1511136000000,1],[1510531200000,1],[1510444800000,1]],"stack":"sent","_colorIndex":2},{"name":"1 received","data":[],"stack":"received","_colorIndex":3},{"name":" made","data":[[1510531200000,1],[1510444800000,2]],"stack":"sent","_colorIndex":4},{"name":" received","data":[],"stack":"received","_colorIndex":5}], //Server data
loading: {
style: {
marginTop: "-25px"
}
}
});
If you would like to view the code snippet in action, please visit this js fiddle link: http://jsfiddle.net/L94731ge/5/
I would greatly appreciate any assistance or guidance on resolving this issue. Thank you!