Highcharts Histogram

by easter bunny

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container"></div>

CSS

#container {
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

var data = [20,24,30,33,38,49,45,67,44,29];

Highcharts.chart('container', {
    title: {
        text: 'What other patients thinks about treatment'
    },
    chart : {type : 'column'},
    xAxis: {
      categories :[
      'poor',
      '',
      '',
      '',
      '',
      'good',
      '',
      '',
      '',
      'excellent']

    },
   colors :['#444444','#444444','#444444','#444444','#444444','	#7DDC1F','#7DDC1F','#7DDC1F','#7FFF00','#7FFF00'],
   yAxis: {
     min: 0,
     title: {
       text: ''
     }
   },
   plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 0,
      groupPadding: 0,
      shadow: false,
      colorByPoint: true
    }
  },
    series: [{
        name: 'Remarks',
        data: data

    }]
});