Highcharts Demo

author(s): Kacper Madej

by Nalin Sajwan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

CSS

#container1 {
    max-width: 800px;
    height: 115px;
    margin: 1em auto;
}
#container2, #container3 {
    max-width: 800px;
    height: 85px;
    margin: 1em auto;
}
.hc-cat-title {
  font-size: 13px;
  font-weight: bold;
}

JavaScript

Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
  return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
};

Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#000',
            targetOptions: {
                width: '200%'
            }
        },
        bar: {
            pointWidth: 35
        },
        columnrange: {
            pointWidth: 25
        },
        scatter: {
          marker: {
            symbol: 'line',
            lineWidth: 2.5,
            radius: 15,
            lineColor: '#000'
          }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Highcharts.chart('container1', {
    chart: {
        marginTop: 40,
        height: 400
    },
    title: {
        text: null
    },
    xAxis: {
    		title: {
        	text: "Designation"	
        },
        categories: ["Revenue 1", "Revenue 2"],
        minPadding: 0,
        maxPadding: 0
    },
    yAxis: {
        max: 100,
        labels: {enabled: false}
    },
    series: [
    	{
        "type": "columnrange",
        "name": "Completion",
        "id": "1",
        zIndex: 1,
        "data": [
          {
            "name": "Category 1",
            "low": 0,
            "high": 70,
            color: "#7cb5ec"
          },
          {
            "name": "Category 2",
            "low": 0,
            "high": 75,
            color: "#90ed7d"
          }
        ]
      },
      {
        "type": "bar",
        "name": "Backgound 1",
        "id": "background-1",
        "linkedTo": "1",
        color: "rgba(164,164,164,0.4)",
        zIndex: 0,
        "data": [
          {
            "name": "Category...