Fix both y-axis to 0 highcharts

Question

I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.

Here is a picture of the graph as is:

Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?

This is my code:

Highcharts.chart('chart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Sales Graph'
                },
                xAxis: {
                    categories: xAxisTicks
                },
                plotOptions: {
                    column: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    formatter: function() {
                        debugger;
                        if (this.series.type == "column") {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
                                'Sales without discount: ' + prettyNumber(this.point.stackTotal);
                        } else {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
                        }
                    }
                },
                colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
                yAxis: [
                {
                    title: {
                        text: 'Daily sales'
                    },
                    min: minYAxisValue,
                    startOnTick: false
                }, {
                    title: {
                        text: 'Accumulated sales'
                    },
                    min: minYAxisValue,
                    startOnTick: false,
                    opposite: true
                }
                ],
                series: data
            });

Can you make a live example of the problem? You can hardcode some data just to show the issue. Also, you can check plugin aligning thresholds https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/2554384-multiple-axis-alignment-control - not sure if it solves the problem, though — morganfree, Mar 01 '17 at 17:37

score 1 · Answer 1 · answered Mar 02 '17 at 05:11

If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.

However you can try this simple workaround:

Have fixed min/max on both y Axes:

yAxis: [{ min: minYAxisValue, max: maxYAxisValue }

Or just link second axis to the first:

yAxis: [{ opposite: true, linkedTo: 0 }

Fix both y-axis to 0 highcharts

1 Answers1