Transparent plot area of heatmap - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

Transparent plot area of heatmap

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from   ww w  . j a v  a2 s .c  om
   min-width: 300px;
   max-width: 800px;
   height: 400px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(function(){
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
            plotBackgroundColor: {
                linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0.03, 'rgb(247, 88, 45)'],
                    [0.5, 'rgb(255, 224, 80)'],
                    [0.67, 'rgb(54, 64, 207)'],
                    [0.99, 'rgb(13, 163, 35)'],
                    [1, 'rgb(217, 186, 50']
                ]
            }
        },
        title: {
            text: 'Sales per employee per weekday'
        },
        xAxis: {
            categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
        },
        yAxis: {
            categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
            title: null
        },
        colorAxis: {
            min: 0,
            minColor: 'transparent',
            maxColor:'transparent'
        },
        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },
        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [[0,0,0],[0,1],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
            dataLabels: {
                enabled: true,
                color: 'black',
                style: {
                    textShadow: 'none'
                }
            }
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials