Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    align: 'center',
    text: 'Fruits'
  },
 
  accessibility: {
    announceNewData: {
      enabled: true
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Cost($)'
    }

  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y:.4f}$'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}$</b><br/>'
  },

  series: [
    {
      name: "Fruits",
      colorByPoint: true,
      data: [
        {
          name: "Apple",
          y: 60,
        },
        {
          name: "Mango",
          y: 70,
        },
        {
          name: "Orange",
          y: 40,
        }
      ]
    }
  ],
});