JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    defaultSeriesType: 'bar'
  },
  title: {
    text: 'Stacked bar chart with negative values'
  },
  xAxis: [{
      categories: ['5-8 ans', '9-11 ans', '12-14 ans', '15-17 ans', '18ans et +'],
      reversed: false
    },
    /*{ // mirror axis on right side
               opposite: true,
               reversed: false,
               categories: ['5-8 ans', '9-11 ans', '12-14 ans', '15-17 ans'],
               linkedTo: 0
           }*/
  ],
  yAxis: {
    min: -10,
    max: 10,
    plotLines: [{
      width: 1,
      value: 0,
      color: 'red'
    }],
    title: {
      enabled: false
    },
    gridLineWidth: 0
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '';
    }
  },
  plotOptions: {
    bar: {
      groupPadding: 0.2
    },
    series: {
      stacking: null
    }
  },

  series: [{
    name: 'Region 1',
    zIndex: 1000,
    data: [
      [1, -5],
      [2, -1],
      [4, 7],
      [3, 4]
    ]
  }]
});