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'],
                            labels: {
                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,
            }
        },
        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]
        }]
    });
});