Legends not matching columns ticks on xAxis in Highcharts

问题

I am trying to create a column chart on Highcharts but I am facing some errors.

Why are my columns starting so far from the start of the chart?
I want the xAxis labels to match the legends. But I can only see that the first legend is being displayed in the middle of the chart

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 600px"></div>

JSON:

let yo = [
{
    "hp": "Harry Potter",
    "hp_num": 1426
},
{
    "hp": "Ronald Weasley",
    "hp_num": 1065
},
{
    "hp": "Hermione Granger",
    "hp_num": 14653
},
{
    "hp": "Neville Longbottom",
    "hp_num": 64625
},
{
    "hp": "Luna Lovegood",
    "hp_num": 613
},
{
    "hp": "Ginny Weasley",
    "hp_num": 3308
},
{
    "hp": "Fred Weasley",
    "hp_num": 2865
},
{
    "hp": "George Weasley",
    "hp_num": 16346
},
{
    "hp": "Charlie Weasley",
    "hp_num": 1000
},
{
    "hp": "Bill Weasley",
    "hp_num": 839
},
{
    "hp": "Arthur Weasley",
    "hp_num": 7643
},
{
    "hp": "Molly Weasley",
    "hp_num": 87804
},
{
    "hp": "Percy Weasley",
    "hp_num": 43712
},
{
    "hp": "Seamus Finnegan",
    "hp_num": 24984
},
{
    "hp": "Dean Thomas",
    "hp_num": 62440
},
{
    "hp": "Lee Jordan",
    "hp_num": 700
},
{
    "hp": "Hagrid",
    "hp_num": 5383
}
]

JavaScript:

let series = [];
    yo.forEach((elem, i) =>  {
        i = 0;
        series.push({
            name: elem.hp,
            data: [{
                x: i++,
                y: elem.hp_num
            }]
        });
    });
    Highcharts.chart(container, {
        chart: {
            height: 750,
            type: 'column'
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: yo.map(elem => elem.hp)
                // type: 'category',
                // labels: {
                //     rotation: -45
                // },
        },
        tooltip: {
            formatter: function() {
                let tooltip = `
                    <span style="font-weight:500;"><b>${this.series.name}</b></span>
                    <br /><br />
                    <span>Browser Count: ${this.y}</span>
                    `;
                return tooltip;
            },
            useHTML: true
        },
        yAxis: [{
            title: {
                text: 'Count'
            }
        }],
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {

                        }
                    }
                }
            }
        },
        legend: {
            labelFormatter: function() {
               return this.name;
            }
        },
        series: series
    });

This is my fiddle: https://jsfiddle.net/rprak0605/h3vtcyzn/37/

What am I doing wrong? How can I fix this?

回答1:

This is the expected output of the data and configuration. You have multiple series, each with a single data point. The chart will by default group them.

You can set grouping:false in the series plot options, but a much better way to display this would be as a single series in a bar chart, where the name is the category and no redundant legend or confusing multiple colors are required.

来源：https://stackoverflow.com/questions/57512471/legends-not-matching-columns-ticks-on-xaxis-in-highcharts

标签

javascript

jquery

json

Highcharts

column-chart