为什么在两个相似的图表中Highcharts的刻度线位置不同？

Question

I have a question regarding the tick placement in two similar Highcharts chart. In the first example, I have specified the xAxis property and in the second example I have specified an x and y value in the series. The data is exactly the same, but as you can see the ticks are placed differently. I have tried to play around with the tickmarkPlacement , minPadding , maxPadding to make the first example look like the second, but without success.

Could someone tell me wy the two charts, place ticks so different and how I could make the first example look like the second example?

The code and jsFiddles:

First Example

The code:

$('#container').highcharts(
    {
        "series": [
            {
                "name": "Series 1",
                "data": [
                    69.78,
                    2235.83,
                    69.78,
                    908.36,
                    69.78,
                    174.78
                ],
                "color": "#0084cb",
                "opposite": false
            }
        ],
        "xAxis": {
            "categories": [
                "2015",
                "2016",
                "2017",
                "2018",
                "2019",
                "2020"
            ],
            "tickmarkPlacement": "on"
        }
    }
);

The chart:

http://jsfiddle.net/fw9o4fjh/5/

Second Example

The code:

$('#container').highcharts(
    {
        "series": [
            {
                "name": "Series 1",
                "data": [
                    {
                        "y": 69.78,
                        "x": 2015
                    },
                    {
                        "y": 2235.83,
                        "x": 2016
                    },
                    {
                        "y": 69.78,
                        "x": 2017
                    },
                    {
                        "y": 908.36,
                        "x": 2018
                    },
                    {
                        "y": 69.78,
                        "x": 2019
                    },
                    {
                        "y": 174.78,
                        "x": 2020
                    }
                ],
                "color": "#0084cb",
                "opposite": false
            }
        ]
    }
);

The chart:

http://jsfiddle.net/y71f7hhd/4/

Answer 1

The difference is a categorical axis type vs a linear axis type.

The categorical axis type reserves an even block of space for each category, which is why you see 'extra' space at the start and end of the x axis.

If you enable crosshairs on the chart, and hover over a point, you will see a good illustration of how it treats the axis spacing:

• categories: http://jsfiddle.net/jlbriggs/fw9o4fjh/6/

• linear: http://jsfiddle.net/jlbriggs/y71f7hhd/5/

One of the things you can do to manipulate the categorical axis the way you want is to use the min and the max, like this:

xAxis: {
  min:0.4,
  max:4.6,
  ...

Example:

• http://jsfiddle.net/jlbriggs/fw9o4fjh/8/

It's far from exact, or ideal, but the categories work the way they do for logical reasons, and if you want your chart to plot like the linear example, the best thing to do is use a linear axis - or, since you're talking about dates, use a datetime axis type.

In either case, you can use the pointStart and pointInterval properties to avoid having to send the x value in your data.

Example:

• http://jsfiddle.net/jlbriggs/fw9o4fjh/10/

Answer 2

The different tick placement is because you've used 'xAxis' for the first chart and 'data' for the second. Change the charts so they're both using the same data method and they should look the same.