use scrollbar on heatmap chart? - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

use scrollbar on heatmap chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Heatmap with Highstock and Highcharts</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {/*from ww  w .  ja v  a  2  s . c  om*/
  Highcharts.chart('container', {
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
      plotBorderWidth: 1
    },
    plotOptions: {
      series: {
        dataLabels: {
          overflow: 'none',
          crop: true,
          enabled: true,
          style: {
            fontWeight: 'normal'
          }
        }
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      categories: ['AE', 'AQ', 'DF', 'CV', 'XC', 'FG'],
      title: null,
      min: 0,
      max: 5,
      scrollbar: {
        enabled: true
      }
    },
    colorAxis: {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },
    legend: {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.yAxis.categories[this.point.y] + '</b> has been awarded <b>' +
          this.point.value + ' $</b> in <br><b>  ' + this.series.xAxis.categories[this.point.x] + '</b>';
      }
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [
        [0, 0, 3432],
        [0, 1, 32323],
        [0, 2, 23232],
        [0, 3, 0],
        [0, 4, 34064],
        [0, 5, 324],
        [0, 6, 33],
        [1, 0, 8292921],
        [1, 1, 34234234],
        [1, 2, 150895],
        [1, 3, 0],
        [1, 4, 432432],
        [1, 5, 312274],
        [1, 6, 532541],
        [2, 0, 1253412],
        [2, 1, 145933],
        [2, 2, 432423],
        [2, 3, 0],
        [2, 4, 2722052],
        [2, 5, 44284],
        [2, 6, 34324],
        [3, 0, 35434257],
        [3, 1, 0],
        [3, 2, 267659],
        [3, 3, 0],
        [3, 4, 4234320],
        [3, 5, 342340],
        [3, 6, 0],
        [4, 0, 1525929],
        [4, 1, 34073],
        [4, 2, 139196],
        [4, 3, 117],
        [4, 4, 0],
        [4, 5, 137038],
        [4, 6, 61571]
      ],
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials