JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Personas tested with'
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['Blind', 'Low Vision'],
        title: {
            text: null
        }
        // tickInterval: 1 // Not needed for categorized xAxis
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Number of Individuals',
            align: 'high'
        }
    },
    series: [{
        name: 'Individuals',
        data: [
            { y: 3, color: '#265BAE' },  // Color for Blind
            { y: 3, color: '#F4683F' }   // Color for Low Vision
        ]
    }]
});