Highcharts dual x axis column + line is adding ticks to secondary x axis

0
votes

I am seeing strange behaviour with highcharts when using dual x-axis. Essentially highcharts is adding extra ticks to the end of the second axis.

Background - Why I'm doing this.

Trying to create a column chart with fixed categories (x-axis) and counts (y-axis) and then trying to plot a secondary plot-line which represents a percentage (i.e. somewhere between 0 and 100). In order to do this I use a secondary x-axis, and to avoid conflict with the column chart I also use a secondary y-axis that's based on a spline (but with no data in the series).

Unfortunately, for some reason the secondary x-axis (used for the plot-line) has extra ticks added to end. In the fiddle below it's going from 0 to 160 even though the min and max on this x-axis is set from 0 to 100.

Any idea how to force the secondary axis to stay between 0 and 100?

Fiddle:

http://jsfiddle.net/5ypnffww/

Highchart config:

{
        "chart": {},
        "title": {
            "text": "This survey run"
        },
        "xAxis": [
            {
                "title": {
                    "text": null
                },
                "categories": [
                    "Very low",
                    "Low",
                    "Neutral",
                    "High",
                    "Very high"
                ]
            },
            {
                "title": {
                    "text": null
                },
                "opposite": true,
                "plotLines": [
                    {
                        "color": "red",
                        "dashStyle": "longdashdot",
                        "value": 50,
                        "width": 2
                    }
                ],
                "labels": {
                    "enabled": true,
                    "step": 1
                },
                "min": 0,
                "max": 100
            }
        ],
        "yAxis": [
            {
                "min": 0,
                "title": {
                    "text": "Number of responses",
                    "align": "high"
                },
                "labels": {
                    "overflow": "justify"
                },
                "allowDecimals": false
            },
            {
                "min": 0,
                "title": {
                    "text": null
                },
                "opposite": true
            }
        ],
        "legend": {
            "enabled": false
        },
        "plotOptions": {
            "column": {
                "dataLabels": {
                    "enabled": true,
                    "color": "black",
                    "style": {
                        "fontWeight": "bold",
                        "text": "0 0 3px black"
                    }
                }
            }
        },
        "credits": {
            "enabled": false
        },
    "series": [
        {
            "name": "Responses",
            "type": "column",
            "pointRange": 0,
            "xAxis": 0,
            "yaxis": 0,
            "data": [
                0,
                1,
                1,
                8,
                1
            ]
        },
        {
            "name": "Net Position",
            "type": "spline",
            "pointRange": 0,
            "xAxis": 1,
            "yaxis": 1
        }
    ]
}
1
javascripthighcharts

1 Answers

1
votes

You need to set a few options in xAxis, like: 

        startOnTick:true,
        endOnTick:true,
        tickPositions: [0, 20, 40, 60, 80, 100]

Example: http://jsfiddle.net/5ypnffww/3/