basic chart

author(s): Torstein Hønsi

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>
<div id="container"></div>

JavaScript

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


Highcharts.chart('container', {
  chart: {
    type: 'bar',
    height: 180
  },
  credits: false,
    title: {
        visibile: false,
        text: ''
    },
    tooltip: {
        enabled: false
    },
  yAxis: {
    visible: false
  },
  xAxis: {
           visibile: false,
         minorTickLength: 0,
         tickLength: 0,
         ticks: {
           visibile: false
         },
         gridLineColor: 'transparent',
         text: '',
    lineWidth: 0,
    categories: ['Strategic Risk', 'Operational Risk', 'Security Risk', 'Compliance']
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
      borderWidth: 5
    },
    series: {
    "enableMouseTracking": false
    },
    
    stacking: 'normal',

    hover: {
      enabled: false
    },
  },
  series: [{
    color: '#e46c00',
    showInLegend: false, 
    data: [3, 3, 3, 3]
  }, {
    color: '#e2cf40',
    showInLegend: false, 
    data: [6, 6, 6, 6]
  }, {
    color: '#729c49',
    showInLegend: false, 
    data: [10, 10, 10, 10]
  }, {
    type: 'scatter',
    data: [17, 6, 12, 18],
    showInLegend: false, 
    color: '#2b2b2baa',
    opacity: 0.7,
    height: 8,
    marker: {
      symbol: 'rectangle',
      radius: 9
    }
  }]
});