react-highcharts
react-highcharts copied to clipboard
kirjs
Labels on axis not shown on heatmap
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'
}
}]
}
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.
@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.
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} />
)
@justinlevinson Highmaps only helps me generate the heatmap, but not the axis label. Were you able to generate axis label this way as well?
@justinlevinson same question with @SophiaYan , could you tell us more about how to generate axis label？
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)
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?
@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?
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}
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)
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} />
@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);
@prashand well if I don't do import * as ... then I get an error saying Heatmap is not a function.
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
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, },
