CODEWITHSUNDEEP
javascripthtmlcssreactjshighcharts
Subhojit
Subhojit

Reputation: 1541

Highchart treemap is not showing numeric data in name field

I'm new to High charts. I'm facing an issue while putting the numeric data in the name field, the data is not getting displayed over the chart.

Here's the working demo => Click here

Here's the code =>

    Highcharts.chart('container', {
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 2011,
            value: 6,
            colorValue: 1
        }, {
            name: 2012,
            value: 6,
            colorValue: 2
        }, {
            name: 2013,
            value: 4,
            colorValue: 3
        }, {
            name: 2014,
            value: 3,
            colorValue: 4
        }, {
            name: 2015,
            value: 2,
            colorValue: 5
        }, {
            name: 2016,
            value: 2,
            colorValue: 6
        }, {
            name: 2017,
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

Any help regarding the issue would be appreciated.

Upvotes: 1

Views: 203

Answers (1)

Xtof
Xtof

Reputation: 425

The name field is a string so if you want to display a numeric data on the chart you have to convert it into a string. To do so you can simply add quotes :

name: '2011',

Or you can use the toString() method:

name: numericValue.toString(),

See demo here

Upvotes: 1

Related Questions