Creating variwide chart - Javascript highcharts

Javascript examples for highcharts:variwide chart

  1. HOME
  2. Javascript
  3. highcharts
  4. variwide chart

Description

Creating variwide chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*  ww  w  .j av a2s . c  om*/
   max-width: 800px;
   min-width: 380px;
   margin: 0 auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/variwide.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        type: 'variwide'
    },
    title: {
        text: 'Verdeling DBCs type per specialist'
    },
    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>'
        },

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

      </script>  
   </body>
</html>

Related Tutorials