Highcharts Demo

author(s): Torstein Hønsi

by sectioni

HTML

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

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

CSS

#container {
  min-width: 360px;
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
}

JavaScript

Highcharts.setOptions({

        tooltip: {
            outside: false,
            useHTML: true,
            backgroundColor: "rgba(247, 247, 247, 1)", // disable the opacity
            formatter: function () {
                var seriesName = this.point.series.name;

                return '' + '<p style="font-size:10px;text-align:left;margin:0; color:black;">' + Highcharts.dateFormat('%e-%b-%Y',
                    new Date(this.x)) + '<br/><span style="font-size:12px; word-break:break-all">' + seriesName + ': ' + this.y + '</span></p>';
            }

        },

})

Highcharts.chart('container', {

  chart: {
    polar: true,
  },
  plotOptions: {
    series: {
			 dataLabels: {
        enabled: true,
        useHTML: true

      },
    }
  },


  series: [{
    name: 'Allocated Budget',
    data: [43000, 19000, 60000, 35000, 17000, 10000],

  }, {
    name: 'Actual Spending',
    data: [50000, 39000, 42000, 31000, 26000, 14000],

  }],
});