Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

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

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

$(function() {
  // Create the chart
  $('#container').highcharts({

    title: {
      text: 'Custom legend symbol'
    },
    legend: {
      useHTML: true,
      symbolWidth: 0,
      labelFormatter: function() {
        var name = this.name;
        var img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Check_Box_Noun_project_10759.svg/2000px-Check_Box_Noun_project_10759.svg.png" width = "10px" height = "10px">';
        let svg = '<svg style="width:20px; height: 20px; background: blue;"></svg>';
        return svg + '	' + name;
      }
    },
    series: [{
      data: [1, 3, -2, -4],
      color: 'red',
      negativeColor: 'lightblue',
      marker: {
        enabled: false
      }
    }]
  });
});