Highcharts Demo

by Mert Karakus

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/bullet.js"></script>

    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>

    <script src="index.js"></script>
  </body>
</html>

CSS

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

JavaScript

Highcharts.setOptions({
  chart: {
    inverted: true,
    marginLeft: 135,
    type: "bullet"
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    gridLineWidth: 0
  },
  plotOptions: {
    series: {
      pointPadding: 0.25,
      borderWidth: 0,
      color: "#329A5D",

      //Target Styles
      targetOptions: {
        width: "200%",
        color: "#000000",
        borderWidth: 1,
        borderStyle: "dashed"
      }
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  }
});

Highcharts.chart("container1", {
  chart: {
    marginTop: 40
  },
  title: {
    text: "Gauge Bar Chart"
  },
  xAxis: {
    categories: [
      '<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)'
    ]
  },
  yAxis: {
    plotBands: [
      {
        from: 0,
        to: 1400,
        color: "#ffffff"
      }
    ],
    labels: {
      format: "{value}%"
    },
    title: null,
    max: 100,
    visible: true
  },

  series: [
    {
      animation: false,
      data: [
        {
          y: 20,
          target: 40
        }
      ]
    }
  ],
  tooltip: {
    pointFormat: "<b>{point.y}</b> (with target at {point.target})"
  }
});

Highcharts.chart("container2", {
  xAxis: {
    categories: ['<span class="hc-cat-title">Profit</span><br/>%']
  },
  yAxis: {
    labels: {
      format: "{value}%"
    },
    title: null,
    max: 100
  },
  series: [
    {
      animation: false,
      data: [
        {
          y: 40,
          target: 70
        }
      ]
    }
  ],
  tooltip: {
    pointFormat: "<b>{point.y}</b> (with target at {point.target})"
  }
});

Highcharts.chart("container3", {
  xAxis: {
    categories: ['<span class="hc-cat-title">New Customers</span><br/>Count']
  },
  yAxis: {
    labels: {
      format: "{value}%"
    },
    title: null,
    max: 100
  },
  series: [
    {
      animation: false,
      data: [
        {
          y: 70,
          target: 60
        }
      ]
    }
  ],
 ...