Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

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

CSS

#container {
   margin: 0 auto;
   margin-top: 50px;
   max-width: 300px;
   min-width: 280px;
 }

JavaScript

var datas = ["$240", "$140"];

Highcharts.setOptions({
  colors: ["#f88b8c", "#fcd0d1"]
});
Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '110%',
    renderTo: 'container',
    events: {
      render: function() {
        var chart = this;
        var height_image = 80;
        var width_image = 80;
        var imgX = chart.plotLeft + (chart.plotWidth * 0.5);
        var imgY = chart.plotTop + (chart.plotHeight * 0.5);
        var position_x = imgX - width_image / 2;
        var position_y = imgY - height_image / 2;
        if (chart.customImage) {
          chart.customImage.attr({
            x: position_x,
            y: position_y,
          });
        } else {
          chart.customImage = chart.renderer.image('https://i.imgur.com/ffPnYu1.png', position_x, position_y, width_image, height_image).css({
            position: 'relative',
            opacity: 1
          }).attr({
            zIndex: 10
          }).add();
        }

        series = chart.series,
          each = Highcharts.each,

          each(series, function(serie, i) {
            color = serie.data[0].color;

            serie.legendSymbol.attr({
              'stroke': color,
              'fill': color
            });
          });
      }
    }
  },

  title: {
    text: '',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    enabled: false
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Move
      outerRadius: '104%',
      innerRadius: '96%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
        .setOpacity(0.4)
        .get(),
      borderWidth: 0
    }]
  },
  legend: {

    labelFormatter: function() {
      console.log(this.chart.series[this.symbolIndex].data[0].color);
       this.chart.series[this.symbolIndex].legendSymbol.destroy();
			var colors = this.chart.series[this.symbolIndex].data[0].color;
      return '<span style="font-size:10px;  color :' + colors...