Hightcharts-contour Demo

author(s): Paulo Costa

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/heatmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts-contour@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/delaunay-fast@latest"></script>

<div id="container" style="height: 400px; max-width: 400px; margin: 0 auto"></div>

JavaScript

var data = [];
for (var i = 0; i < 30; i++) {
  var x = 200 * Math.random() - 100;
  var y = 200 * Math.random() - 100;
  var value = Math.sqrt(x * x + y * y);
  data.push([x, y, value]);
}

Highcharts.chart('container', {
  title: {
    text: 'Random points locations',
  },
  subtitle: {
    text: 'Sometimes your data samples are not not in a pretty grid, but looks nice and smooth anyway ;)',
  },
  xAxis: {
    min: -100,
    max: 100,
  },
  yAxis: {
    min: -100,
    max: 100,
  },
  colorAxis: {
    stops: [
      [0, '#3060cf'],
      [0.5, '#fffbbc'],
      [0.9, '#c4463a']
    ],
  },
  series: [{
    type: 'contour',
    data: data,
  }]
});