highcharts

HighCharts candlestick chart with linear x-axis


Is there a way to create a HighCharts candlestick chart where the x-axis contains regular numeric values instead of DateTime values? I've tried setting the xAxis type to 'linear', but this doesn't work, see fiddle here: https://jsfiddle.net/L6j3049g/

  // create the chart
  Highcharts.stockChart("container", {
    rangeSelector: {
      selected: 1,
    },

    title: {
      text: "AAPL Stock Price",
    },
    xAxis: {
      type: "linear",
    },
    series: [
      {
        type: "candlestick",
        name: "AAPL Stock Price",
        data: [
          [1, 230.12, 230.2, 229.8, 230.15],
          [2, 230.15, 230.17, 229.85, 229.95],
          [3, 229.95, 230.1, 229.88, 230.05],
          [4, 230.05, 230.25, 230.0, 230.15],
          [5, 230.15, 230.18, 229.9, 230.0],
        ],
      },
    ],
  })

Solution

  • With Stock, you always get the datetime xAxis, as this product is designed to display stock data on a time axis, setting it to linear is ignored.

    If you don't need Stock features like navigator and range selector, you can just switch to Core this way:

    (async () => {
        Highcharts.chart("container", {
            title: {
                text: "AAPL Stock Price",
            },
            xAxis: {
                type: "linear",
            },
            series: [
                {
                    type: "candlestick",
                    name: "AAPL Stock Price",
                        data: [
                            [1, 230.12, 230.2, 229.8, 230.15],
                            [2, 230.15, 230.17, 229.85, 229.95],
                            [3, 229.95, 230.1, 229.88, 230.05],
                            [4, 230.05, 230.25, 230.0, 230.15],
                            [5, 230.15, 230.18, 229.9, 230.0],
                        ],
                },
            ],
        })
    })()
    

    If you need to stick with Stock, you need to map your numbers to dates and customize labels with the labels.format or formatter: https://api.highcharts.com/highstock/xAxis.labels.format