How can I plot the x-axis on a highchart like this?

Viewed 16

I'm building a chart using the highcharts javascript library I'm expecting to get a chart like this And here's what I already have. enter link description here

enter code here
1 Answers

You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between

  plotOptions: {
    column: {
      pointPlacement: "between"
    }
  },

The label's position can be set by xAxis.labels.x option.

Demo: https://jsfiddle.net/BlackLabel/a4qs7dp9/

API Reference: https://api.highcharts.com/highcharts/series.column.pointRange https://api.highcharts.com/highcharts/series.column.pointPlacement https://api.highcharts.com/highcharts/xAxis.labels.x

Related