JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      height: 500,
      width: 1200
    },
    legend: {
      itemStyle: {
        color: '#2e2e2e',
        fontSize: '13px',
        fontFamily: 'Open Sans',
        fontWeight: 'normal'
      }
    },
    xAxis: {
      categories: ['easyJet Plus', 'easyJet Flight Club', 'British Airways', 'myRyanair', 'FlyBe Avios', 'myJet2', 'Norwegian Reward', 'Miles and More', 'Flying Blue', 'TUI', 'epoints', 'Vueling Avios'],
      formatter: function() {
        if (this.x === 'easyJet Plus') {
          return '<span style="color: #ff4600;">' + this.x + '</span>';
        }
      },

      labels: {
        formatter: function() {
          if (this.value === 'easyJet Plus' || this.value === 'easyJet Flight Club') {
            return '<span style="fill: #ff4600;">' + this.value + '</span>';
          } else {
            return this.value;
          }
        },
        style: {
          color: '#2e2e2e',
          fontSize: '12px',
          fontFamily: 'Open Sans'
        }
      },
    },
    yAxis: {
      min: 0,
      labels: {
        style: {
          color: '#2e2e2e',
          fontSize: '12px',
          fontFamily: 'Open Sans'
        }
      },

    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
    },
    plotOptions: {
      bar: {
        stacking: 'percent'
      },
      series: {
        groupPadding: 0.1,
        allowPointSelect: true
      }
    },
    series: [{
      color: '#ff7d00',
      name: 'More likely to choose',
      data: [55, 50, 55, 60, 45, 40, 35, 42, 54, 55, 50, 55]
    }, {
      color: '#a9a9a9',
      name: 'No difference',
      data: [10, 15, 20, 15, 18, 20, 22, 25, 30, 10, 15, 20]
    }, {
      color: '#f6c8a9',
      name: 'Less likely to choose',
      data: [35, 35, 25, 25, 37, 40, 43, 33, 16, 35, 35, 25]
    }]
  });
});