basic chart

by sundaramkumar

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
new customised
<div id="container"></div>

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rectangle = function(x, y, w, h) {
  return ['M', x + w / 5, y + h / 1.75, 'L', x + w - w / 7, y + h / 1.75, 'L', x + w - w / 7, y + h / 2.5, 'L', x + w / 5, y + h / 2.5, 'z'];
};


Highcharts.chart('container', {
  chart: {
    type: 'bar',
    height: 200
  },
  legend: {
    reversed: true
  },
  credits: false,
  title: {
    visibile: false,
    text: ''
  },
  tooltip: {
    enabled: true
  },
  yAxis: {
    visible: false
  },
  xAxis: {
    visibile: false,
    minorTickLength: 0,
    tickLength: 0,
    ticks: {
      visibile: false
    },
    gridLineColor: 'transparent',
    text: '',
    lineWidth: 0,
    categories: ['Strategic Risk', 'Operational Risk', 'Compliance Risk', 'Test Risk', 'kumar']
  },
  plotOptions: {
    bar: {
      groupPadding: 0.1,
      borderColor: 'white',
      borderWidth: 3,
      stacking: 'normal',
    },
    series: {
      "enableMouseTracking": true
    },

    stacking: 'normal',

    hover: {
      enabled: true
    },
  },
  series: [{
      color: '#e46c00',
      showInLegend: true,
      data: [10, 10, 10, 10, 10]
    },
    {
      color: '#e2cf40',
      showInLegend: true,
      data: [20, 20, 20, 20, 20]
    },
    {
      color: '#729c49',
      showInLegend: false,
      data: [70, 70, 70, 70, 70]
    },
    {
      type: 'scatter',
      data: [70, 80, 1, 91, 100],
      showInLegend: true,
      color: '#2b2b2baa',
      opacity: 0.7,
      height: 15,
      marker: {
        symbol: 'rectangle',
        radius: 15
      }
    }
  ]
});