I have a Highcharts that has column range and scatter point at top and bottom.
For some reason the scatter points are not exactly aligned.
Created a simplistic version in codepen here. Anyone can help ?
https://codepen.io/Ponmudi-VN/pen/mdgaGVr
Highcharts.chart('container', {
chart: {
type: 'columnrange'
},
plotOptions: {
columnrange: {
pointWidth: 2
},
scatter: {
marker: {
symbol: 'diamond',
radius: 2
}
}
},
series: [{
data: [
[0, 5, 10],
[1, 3, 8],
[2, 6, 12],
[3,5,15]
]
}, {
type: 'scatter',
data: [
[0, 10],
[1, 8],
[2, 12],
[3,5]
]
}, {
type: 'scatter',
data: [
[0, 5],
[1, 3],
[2, 6],
[3,15]
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-3d.js"></script> <script src="https://code.highcharts.com/modules/stock.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/gantt.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/draggable-points.js"></script> <script src="https://code.highcharts.com/modules/static-scale.js"></script> <script src="https://code.highcharts.com/modules/broken-axis.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/tilemap.js"></script> <script src="https://code.highcharts.com/modules/timeline.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/treegraph.js"></script> <script src="https://code.highcharts.com/modules/item-series.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/bullet.js"></script> <script src="https://code.highcharts.com/modules/funnel.js"></script> <script src="https://code.highcharts.com/modules/funnel3d.js"></script> <script src="https://code.highcharts.com/modules/pyramid3d.js"></script> <script src="https://code.highcharts.com/modules/networkgraph.js"></script> <script src="https://code.highcharts.com/modules/pareto.js"></script> <script src="https://code.highcharts.com/modules/pattern-fill.js"></script> <script src="https://code.highcharts.com/modules/price-indicator.js"></script> <script src="https://code.highcharts.com/modules/sankey.js"></script> <script src="https://code.highcharts.com/modules/arc-diagram.js"></script> <script src="https://code.highcharts.com/modules/dependency-wheel.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> <script src="https://code.highcharts.com/modules/sonification.js"></script> <script src="https://code.highcharts.com/modules/stock-tools.js"></script> <script src="https://code.highcharts.com/modules/streamgraph.js"></script> <script src="https://code.highcharts.com/modules/sunburst.js"></script> <script src="https://code.highcharts.com/modules/variable-pie.js"></script> <script src="https://code.highcharts.com/modules/variwide.js"></script> <script src="https://code.highcharts.com/modules/vector.js"></script> <script src="https://code.highcharts.com/modules/venn.js"></script> <script src="https://code.highcharts.com/modules/windbarb.js"></script> <script src="https://code.highcharts.com/modules/wordcloud.js"></script> <script src="https://code.highcharts.com/modules/xrange.js"></script> <script src="https://code.highcharts.com/modules/no-data-to-display.js"></script> <script src="https://code.highcharts.com/modules/drag-panes.js"></script> <script src="https://code.highcharts.com/modules/debugger.js"></script> <script src="https://code.highcharts.com/modules/dumbbell.js"></script> <script src="https://code.highcharts.com/modules/lollipop.js"></script> <script src="https://code.highcharts.com/modules/cylinder.js"></script> <script src="https://code.highcharts.com/modules/organization.js"></script> <script src="https://code.highcharts.com/modules/dotplot.js"></script> <script src="https://code.highcharts.com/modules/marker-clusters.js"></script> <script src="https://code.highcharts.com/modules/hollowcandlestick.js"></script> <script src="https://code.highcharts.com/modules/heikinashi.js"></script> <div id="container"></div>