Highcharts Demo

by Black Label

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)'
        ],
        plotBands: [{
            from: -0.18,
            to: 0.15,
            color: "gray"
        }]
    },
    yAxis: {
        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/>%'],
        plotBands: [{
            from: -0.18,
            to: 0.15,
            color: "gray"
        }]
    },
    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})"
   ...