Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'scatter'
  },

  title: {
    text: 'Highcharts Bubbles with symbols'
  },

  series: [{
    data: [
      [97, 36],
      [94, 74],
      [68, 76],
      [64, 87],
      [68, 27],
      [74, 99],
      [7, 93],
      [51, 69],
      [38, 23],
      {
        x: 57,
        y: 0,
        z: 31,
        marker: {
          symbol: 'triangle',
          lineColor: 'red',
          fillColor: 'rgba(255,0,0,0.5)'
        },
        dataLabels: {
          enabled: true,
          format: 'Individual marker'
        }
      }
    ],
    marker: {
      symbol: 'square'
    },
    name: 'Square'
  }, {
    data: [
      [25, 10],
      [2, 75],
      [11, 54],
      [86, 55],
      [5, 3],
      [90, 63],
      [91, 33],
      [97, 3],
      [15, 67],
      [54, 25]
    ],
    marker: {
      symbol: 'diamond'
    },
    name: 'Diamond'
  }]

});