Labels on axis not shown on heatmap #300

plag · 2017-05-11T16:02:45Z

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'
    }
}]

}

The text was updated successfully, but these errors were encountered:

plag · 2017-05-12T07:20:33Z

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 · 2017-08-02T05:17:42Z

@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 · 2017-08-16T17:03:12Z

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 · 2017-08-16T23:20:10Z

@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 · 2017-08-30T16:50:32Z

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

NurbekAman · 2017-09-04T06:05:04Z

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 · 2017-09-04T06:16:15Z

@NurbekAman thx buddy！

nadim · 2017-11-05T18:30:05Z

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 · 2017-11-07T21:03:50Z

@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 · 2017-11-17T12:38:37Z

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 · 2017-11-18T00:07:15Z

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 · 2017-12-13T16:47:37Z

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 · 2017-12-13T17:26:25Z

@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 · 2017-12-13T17:27:40Z

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

param-fk · 2018-01-03T07:51:41Z

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

itscindella · 2018-06-12T03:55:54Z

I'm also seeing this :/

luisgurmendez · 2018-10-06T01:16:15Z

@NurbekAman how do you instance it? ?

CreativeArtDev · 2018-11-15T16:44:02Z

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 · 2018-11-20T20:34:57Z

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,
},

plag changed the title ~~dataLabels enabled true not working on heatmap~~ Labels on axis not shown on heatmap May 12, 2017

luisgurmendez mentioned this issue Oct 5, 2018

Heatmap does not show axis. #422

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Labels on axis not shown on heatmap #300

Labels on axis not shown on heatmap #300

plag commented May 11, 2017

plag commented May 12, 2017

16chuang commented Aug 2, 2017

justinlevinson commented Aug 16, 2017

SophiaYan commented Aug 16, 2017

SnapluDJ commented Aug 30, 2017

NurbekAman commented Sep 4, 2017 •

edited

SnapluDJ commented Sep 4, 2017

nadim commented Nov 5, 2017

nadim commented Nov 7, 2017

prashand commented Nov 17, 2017 •

edited

nadim commented Nov 18, 2017 •

edited

ashok-sc commented Dec 13, 2017

prashand commented Dec 13, 2017 •

edited

ashok-sc commented Dec 13, 2017

param-fk commented Jan 3, 2018

itscindella commented Jun 12, 2018

luisgurmendez commented Oct 6, 2018

CreativeArtDev commented Nov 15, 2018 •

edited

Claudiogoncalves commented Nov 20, 2018

Labels on axis not shown on heatmap #300

Labels on axis not shown on heatmap #300

Comments

plag commented May 11, 2017

plag commented May 12, 2017

16chuang commented Aug 2, 2017

justinlevinson commented Aug 16, 2017

SophiaYan commented Aug 16, 2017

SnapluDJ commented Aug 30, 2017

NurbekAman commented Sep 4, 2017 • edited

SnapluDJ commented Sep 4, 2017

nadim commented Nov 5, 2017

nadim commented Nov 7, 2017

prashand commented Nov 17, 2017 • edited

nadim commented Nov 18, 2017 • edited

ashok-sc commented Dec 13, 2017

prashand commented Dec 13, 2017 • edited

ashok-sc commented Dec 13, 2017

param-fk commented Jan 3, 2018

itscindella commented Jun 12, 2018

luisgurmendez commented Oct 6, 2018

CreativeArtDev commented Nov 15, 2018 • edited

Claudiogoncalves commented Nov 20, 2018

NurbekAman commented Sep 4, 2017 •

edited

prashand commented Nov 17, 2017 •

edited

nadim commented Nov 18, 2017 •

edited

prashand commented Dec 13, 2017 •

edited

CreativeArtDev commented Nov 15, 2018 •

edited