What methods can I use to achieve this shaping of the x-axis?

user_16035338 0
Viewed 34

I would like to make a graph like this: example image

Highcharts.chart('container', {
  chart: {
    type: 'column',
    width: 780
  },
  legend: {
    enabled: false
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    series: {
      pointPadding: 0.1,
      groupPadding: 0.1,
      pointWodth: 20
    },
    column: {
      borderRadius: '2px'
    }
  },
  series: [{
    color: 'orange',
    name: 'Приход',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

  }, {
    color: 'blue',
    name: 'Расход',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

  }]
});

But I don't know how I can plot the X-axis like in the screenshot, I would appreciate your help, thanks)

highcharts
2 Answers

Step 1. You can set the categories in the x-axis. If you put a comma after the last category description, it automatically creates the pattern.

Step 2. Set the tickwidth to 1 in the x-axis.

 xAxis: {
    categories: ["0", "1", "2",],
    tickWidth: 1
  },
user_39641580

For the second requirement (https://jsfiddle.net/r1d6tozq/29/), add pointPlacement: 'between' to the plotOptions as follows:

plotOptions: {
    column: {
      shadow: false,
      pointPlacement: 'between'
    }
  }
user_39641580
Related