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, y, 'L', x + w, y, 'L', x + w, y + h / 6, 'L', x, y + h / 6, '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: {
      stacking: 'normal',
      borderWidth: 0
    },
    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: [69, 80, 20, 93, 100],
    showInLegend: true, 
    color: '#2b2b2baa',
    opacity: 0.7,
    height: 15,
    marker: {
      symbol: 'rectangle',
      radius: 15
    }
  }]
});