Labels on axis not shown on heatmap

[plag]

This configuration not show labels on xAxis and yAxis. How can i get it? On local demo it looks like

Highcharts demo is normally show labels. Can check it here https://www.highcharts.com/demo/heatmap

xAxis: { dataLabels|labels: { enabled: true } } is not working

options:

{

chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
},

title: {
    text: 'Sales per employee per weekday'
},

xAxis: {
    categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'],
    labels: {
      enabled: true,
    },
    dataLabels: {
      enabled: true,
    }
},
yAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    title: null
},

colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
},

legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
},

tooltip: {
    formatter: function () {
        return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
            this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
    }
},

series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
    dataLabels: {
        enabled: true,
        color: '#000000'
    }
}]

}

[plag]

Solved this problem by

import Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap';

// Load Highmaps as a module
Heatmap(Highcharts);

and manually render highcharts.

this.chart = new Highcharts['Chart'](this.refs.chart, config);

I think that Highmaps !== Highcharts+Heatmap. But i can not run react-higcharts with higcharts-heatmap module by the way above. It show render error that something can not be rendered.

[16chuang]

@plag Did you ever get a "Cannot read property 'lineWidth' of undefined at k.pointAttribs" error while rendering the heatmap? I am able to see numbers on my heatmap, but no colors appear.

[justinlevinson]

For others having trouble, the issue may be that Heatmap is actually part of Highmaps, not Highcharts.

This works for me (stateless functional component, adapt as necessary if you have a class):

const ReactHighcharts = require("react-highcharts")
const ReactHighmaps = require('react-highcharts/ReactHighmaps.src');

const chartConfig = {
    chart: {
      type: 'heatmap',
      ...
  }
}

...

return(
  <ReactHighmaps config={chartConfig} />
)

[SophiaYan]

@justinlevinson Highmaps only helps me generate the heatmap, but not the axis label. Were you able to generate axis label this way as well?

[SnapluDJ]

@justinlevinson same question with @SophiaYan , could you tell us more about how to generate axis label？

[NurbekAman]

SnapluDJ. You can do like this. import Highcharts from 'highcharts' import Heatmap from 'highcharts/modules/heatmap'

import React, { Component } from 'react'

import ReactHighchart from 'react-highcharts'

Heatmap(ReactHighchart.Highcharts)

[SnapluDJ]

@NurbekAman thx buddy！

[nadim]

I still can't get axis labels with:

import Highcharts from 'highcharts'
import Heatmap from 'highcharts/modules/heatmap'
import Data from 'highcharts/modules/data'

import React, { Component } from 'react'

import ReactHighcharts from 'react-highcharts'
import ReactHighmaps from 'react-highcharts/ReactHighmaps.src'

Data(ReactHighcharts.Highcharts)
Heatmap(ReactHighcharts.Highcharts)

...

      config = {
        chart: {
          type   : 'heatmap'
        },
        title: undefined,
        legend: false,
        xAxis: {
          categories: xCategories,
          labels: {
            enabled: true,
          },
          dataLabels: {
            enabled: true,
          }
        },
        yAxis: {
          categories: yCategories,
          labels: {
            enabled: true,
          },
          dataLabels: {
            enabled: true,
          }
        },
        series: [{
          data: resultData
        }]
      }
      return <ReactHighmaps config={config} />

@justinlevinson @NurbekAman am I missing something that one of you has?

[nadim]

@16chuang I'm now getting this exact error for my heatmap, and not seeing anything render.

Were you able to solve this by any chance?

[prashand]

plag's method worked for me. But I did not need to "manually render the chart" Here's the full code, in case anyone wants to copy it and check the output.

import React from 'react';
import ReactHighcharts from 'react-highcharts';
import Heatmap from 'highcharts/modules/heatmap';
Heatmap(ReactHighcharts.Highcharts);

const HeatMap = () => {

    const config = {

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        },

        title: {
            text: null
        },

        xAxis: {
            categories: ['00:00-01:00', '01:00-02:00', '02:00-03:00', '04:00-04:00', '04:00-05:00', '05:00-06:00', '06:00-07:00',
                '07:00-08:00', '08:00-09:00', '09:00-10:00','10:00-11:00','11:00-12:00'],
            labels: {
                enabled: true,
            },
            dataLabels: {
                enabled: true,
            }
        },

        yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday','Sunday'],
            title: 'Days',
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67],[0, 5, 24], [0, 6, 67], [1, 0, 92],
                [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15],
                [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114],
                [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117],
                [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120],
                [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31],
                [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97],
                [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31],
                [9, 3, 48], [9, 4, 91]],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]

    };

    return <ReactHighcharts config={config}/>
};

export {HeatMap}

[nadim]

Thanks for following up.

The code below ended up doing the trick:

import HighchartsData from 'highcharts/modules/data'
import HighchartsMore from 'highcharts/highcharts-more'
import Highcharts from 'highcharts'
import Heatmap from 'highcharts/modules/heatmap'

HighchartsData(ReactHighcharts.Highcharts)
HighchartsMore(ReactHighcharts.Highcharts)
Heatmap(ReactHighcharts.Highcharts)

[ashok-sc]

Not sure why my imports look different, but this is what worked for me:

import * as ReactHighcharts from 'react-highcharts';
import * as Heatmap from 'highcharts/modules/heatmap';
Heatmap(ReactHighcharts.Highcharts);
...
...

<ReactHighcharts config={config} />

[prashand]

@ashok-sc This is no different from what works, except that you're importing all the modules with the * instead of a single import

import ReactHighchart from 'react-highcharts';
import Heatmap from 'highcharts/modules/heatmap';
Heatmap(ReactHighchart.Highcharts);

[ashok-sc]

@prashand well if I don't do import * as ... then I get an error saying Heatmap is not a function.

[param-fk]

Any help? Isn't there any standard solution to load heatmaps correctly?

[itscindella]

I'm also seeing this :/

[luisgurmendez]

@NurbekAman how do you instance it? ?

[CreativeArtDev]

Even now, I just faced this issue. And I solved this based on the @prashand 's way. But there some code should be fixed.

export {HeatMap} --> export default HeatMap

[Claudiogoncalves]

I can show xAxis as the code:

xAxis: { categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'], visible: true, },

yAxis: { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], visible: true, title: null, },