Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

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

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

<div id="container_log"></div>

CSS

#container {
	max-width: 800px;
	min-width: 380px;
	margin: 0 auto;
}

JavaScript

var chartData = {

    chart: {
        type: 'variwide'
    },

    title: {
        text: 'Variwide with yAxis type - Linear'
    },

    xAxis: {
        type: 'category',
    },
    
    yAxis: {
    	max: 100,
    },

    legend: {
        enabled: true,
        reversed: true
    },
 plotOptions: {
        variwide: {
            stacking: 'normal',}},
    series: [ {
        name: 'Type B',
        data: [
            ['Specialist A', -49.8, 335504],
            ['Specialist B', -58, 277339],
            ['Specialist C', -11, 421611],
        ],
        tooltip: {
            pointFormat: 'Type B: <b>{point.y}%</b><br>' +
                 'Totaal # DBCs: <b> {point.z} </b><br>'
        },
       // colorByPoint: true
    },{
        name: 'Type A',
        data: [
            ['Specialist A', -50.2, 335504],
            ['Specialist B', -42, 277339],
            ['Specialist C',- 89, 421611],

        ],
        tooltip: {
            pointFormat: '{point.series.name}: <b>{point.y}%</b><br>' +
                'Totaal # DBCs: <b> {point.z} </b><br>'
        },
       // colorByPoint: true
    }]
};

Highcharts.chart('container', chartData);

chartData.title.text = "Variwide with yAxis type - Logarithmic";
chartData.yAxis.type = "logarithmic";
Highcharts.chart('container_log', chartData);