Highcharts X-range Series Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create a x-range series chart using highcharts library with examples.

Highcharts X-range Series Chart Example

Following is the example of creating an x-range series chart by setting the required chart properties using highcharts library.

 

Live Preview

<html>

<head>

    <title>Highcharts X-range Series Chart</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script src="https://code.highcharts.com/modules/xrange.js"></script>

    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <script type="text/javascript">

        $(function() {

            Highcharts.chart('container', {

                chart: {

                    type: 'xrange'

                },

                title: {

                    text: 'Highcharts X-range'

                },

                xAxis: {

                    type: 'datetime'

                },

                yAxis: {

                    title: {

                        text: ''

                    },

                    categories: ['Prototyping', 'Development', 'Testing'],

                    reversed: true

                },

                series: [{

                    name: 'Project 1',

                    borderColor: 'gray',

                    pointWidth: 20,

                    data: [{

                        x: Date.UTC(2014, 10, 21),

                        x2: Date.UTC(2014, 11, 2),

                        y: 0,

                        partialFill: 0.25

                    }, {

                        x: Date.UTC(2014, 11, 2),

                        x2: Date.UTC(2014, 11, 5),

                        y: 1

                    }, {

                        x: Date.UTC(2014, 11, 8),

                        x2: Date.UTC(2014, 11, 9),

                        y: 2

                    }, {

                        x: Date.UTC(2014, 11, 9),

                        x2: Date.UTC(2014, 11, 19),

                        y: 1

                    }, {

                        x: Date.UTC(2014, 11, 10),

                        x2: Date.UTC(2014, 11, 23),

                        y: 2

                    }],

                    dataLabels: {

                        enabled: true

                    }

                }]

            });

        });

    </script>

</head>

<body>

    <div id="container"></div>

</body>

</html>

If you observe the above example, we created an x-range series chart by using highcharts library with required properties.

 

When we execute the above highcharts example, we will get the result like as shown below.

 

Higcharts X-Range Series Chart Example Result

 

This is how we can create an x-range series chart using highcharts library with required properties. 

Topics Covered