[HighChart - Basic Bar Chart] #BasicBar #Highchart

EX01.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; max-width: 800px; height: 400px; margin: 0 auto"></div>

EX01.js

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        backgroundColor: 'transparent'
    },
    title: {
    		text: ''
    },
    xAxis: {
        categories: ['APP Early Testing', 'APP QA PTRs Aging', 'QA NRE Coverage', 'QA Maturity', 'APP Delivery Quality', 'APP PRD Health', 'QA Deflection rate', 'QA Effectiveness'],
        title: {
            text: null
        }
    },
    yAxis: {
    	 min: 0,
       max: 100,
        title: {
            text: ''
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' '
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                style: {
                  fontSize: '15px',
                  fontWeight: 'bold',
                  color: 'black'
               }
            },
            zones: [{
             value: 20, // Values up to 10 (not including) ...
             color: 'red' // ... have the color blue.
                },{
             value: 80,
             color: '#7cb5ec' // Values from 10 (including) and up have the color red
             },{
             color: 'green' // Values from 10 (including) and up have the color red
             }]
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: ' ',
        data: [55, 95, 63, 47, 65, 71, 36, 98],
    }]
});

EX01.md

Figure - final result of basic bar (which show diff. colors according to its data)