How to use horizontal line charts to display data in Highcharts

Highcharts is a very popular JavaScript chart library that supports multiple chart types to display data. Among them, the horizontal line chart is a commonly used chart type used to display the horizontal position of a certain value in the data.

This article will introduce how to use horizontal line charts in Highcharts to display data and provide specific code examples. The following are the steps:

Step 1: Prepare data

First you need to prepare the data, such as the following data:

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

In the above data, name represents the name of the horizontal line, and value represents the horizontal line value. Here we use 5 types of horizontal lines, which can be increased or decreased as needed.

Step 2: Create a container

Create an HTML container for placing Highcharts charts. For example:

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

Step 3: Introduce the Highcharts library

Introduce the Highcharts library into the HTML page. For example:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

Step 4: Write the Highcharts configuration

Write the Highcharts configuration in the JavaScript file, including the title, data, x-axis, y-axis, etc. of the horizontal line chart. The type of horizontal line chart is xrange. The specific configuration code is as follows:

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

In the above configuration, the chart type is xrange, which means generating a horizontal line chart. title represents the chart title, xAxis represents the x-axis, and there is only one "Value" item in categories because there is only one x-axis in the horizontal line chart. yAxis represents the y-axis, reversed represents flipping the y-axis so that the highest value is at the top; maxPadding represents the proportion of space left above and below the y-axis, and min and max represent the minimum and maximum values ​​of the y-axis. legend represents the legend, which is not needed here, so it is set to false. series represents the data series, where name is the name of the data series, data is the data, borderRadius represents the border fillet radius, borderColor represents the border color, borderWidth represents the border width, and pointWidth represents the width of the horizontal line.

Step 5: Display the chart

Finally, call the Highcharts configuration in the HTML page and display the chart in the container.

Highcharts.chart('container', options);

The complete code is as follows:

    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


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

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

The above are all the steps to use the horizontal line chart in Highcharts to display data. I hope to be helpful.

The above is the detailed content of How to use horizontal line charts to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!