Search code examples
javascripthighchartscolorstreemap

How to construct a colored treemap with Highcharts

I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.

My csv looks like that : Name,Value,colorValue

The first column is the name. The second one is the percentage of activity. The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).

Do someone has an example ? Because it doesn't work, nothing happen (no error too), i think it come from the csv load.

Here my actual code :

HTML :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <pre id="data" style="display:none">Name,Value,colorValue
      A,1,1
      B,10,25
      C,20,0
      D,30,16
      E,40,78
      F,50,85
      G,60,20
      H,70,35
      I,80,9
     </pre>    
  <div id="container"></div> 
  <script src="Highcharts/code/highcharts.js"></script>
  <script src="Highcharts/code/modules/heatmap.js"></script>
  <script src="Highcharts/code/modules/treemap.js"></script>
  <script src="Highcharts/code/modules/data.js"></script>
  <script src="index.js"></script>
</body>
</html>

my Js :

Highcharts.chart('container', {
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[5]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: {
            csv: document.getElementById('data').innerHTML,
            seriesMapping: [{
               colorValue: 2
            }]
        }
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});
Solution

  • The CSV data properties should not be inside a series object but chart object, like that:

    Highcharts.chart('container', {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[5]
  },
  data: {
    csv: document.getElementById('data').innerHTML,
    seriesMapping: [{
      colorValue: 2
    }]
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    keys: ['name', 'value', 'colorValue']
  }],
  title: {
    text: 'Highcharts Treemap'
  }
});

    Demo:

    API reference: