Search code examples
highchartsaxisnumeric

Highstock: X Axis with numeric values. Spacing not respected

For some reasons, I need to use Highstock (navigator, crosshair, annotations...). And I need to display a graph with numerical values for X axis. In this simple example, the X Axis looks chaotic, and numeric values are not placed/spaced as expected.

    Highcharts.stockChart('container', {
    rangeSelector: {
       enabled: false
    },
    navigator:{
       enabled: true
    },
    xAxis: {
       labels: {   formatter: function () {return this.value;}},
       crosshair: {
          width: 1,
          color: 'black'
       }
    },

    series: [{
        type: 'areaspline',
        data: [
            [10, 30],
            [20, 25],
            [25, 22.5],
            [30,20],
            [40,15]
        ]
    }]
});

JSFiddle example: Here

1/ What should I do to get a graphic like this? Normal X axis with numerics

2/ I can see the line is smoothed. How can I disable this smoothing?

Solution

  • Disable the ordinal option:

        xAxis: {
        ordinal: false,
        ...
    }

    Live demo: https://jsfiddle.net/BlackLabel/q6xv7koh/

    API Reference: https://api.highcharts.com/highstock/xAxis.ordinal