<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="lineChart_div"></div>
</body>

<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/highcharts.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/variable-pie.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/highcharts-more.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/exporting.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/offline-exporting.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/histogram-bellcurve.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/wordcloud.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/heatmap.js"></script>
<script type="text/javascript" src="https://keresearch.in/demoDash/assets/code/modules/treemap.js"></script>
            
<script>
    var data = [
    {
        "name": "Installation & Developers",
        "data": [
            43,
            48,
            65,
            81,
            11,
            14
        ]
    },
    {
        "name": "Manufacturing",
        "data": [
            29,
            29,
            29,
            0,
            0,
            0
        ]
    },
    {
        "name": "Sales & Distribution",
        "data": [
            11,
            30,
            16,
            19,
            20,
            24
        ]
    },
    {
        "name": "Operations & Maintenance",
        "data": [
            11,
            11,
            10,
            12,
            16,
            18
        ]
    },
    {
        "name": "Other",
        "data": [
            21,
            55,
            81,
            11,
            89,
            11
        ]
    }
];

    function lineChart(data,id)
{
    Highcharts.chart(id, {
        chart: {
            style: {
                fontFamily: 'Roboto'
            },
            "backgroundColor": "transparent",
        },
        title: {
            text: '',
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            alignTicks: false,
            labels: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || // theme
                '#fff'
        },
        xAxis: {
            labels: {
                style: {
                    fontWeight: 'bold'
                },
                rotation:0,
                useHTML: true,
                padding:15,
                height:10,
                width:10,
            },
            categories: ["W1","W2","W3","W4","W5","W6"]
        },
        tooltip: {
            shared: true,
            split: false,
            enabled: true,
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '<span style="color:{point.color}">\u25CF</span> Percentage for {series.name}: <b>{point.y}%</b> <br/>',
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    formatter: function() {
                        return (this.y)+"%";
                    },
                },
                label: {
                    connectorAllowed: false
                },
            }
        },
        // colors: ['#35b997', '#e20000', '#FEF302', '#910000', '#1aadce', '#39FF14', '#f28f43', '#EC407A'],
        //colors:["#001f3f", "#003366", "#00509E", "#0077B6", "#0096C7", "#00B4D8", "#48CAE4", "#90CDF4"],
        colors: ['#C07B60','#FA8D62','#2C626E','#B1DCD3','#74A9CE','#A6BCDB','#D0D0E7'],
        series: data,
    });
}

lineChart(data,"lineChart_div");
</script>
</html>