Related
If I apply scrollbar to the heatmap(by highcharts), then on scrolling the data overlaps with the x axis labels.
Is scrollbar not supported on the heatmap as of now?
Please check jsfiddle for better clarity
$(function () {
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'normal'
}
}
}
},
title: {
text: ''
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
categories: ['AE', 'AQ', 'DF', 'CV', 'XC', 'FG'],
title: null,
min: 0,
max: 5,
scrollbar: {
enabled: true
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.yAxis.categories[this.point.y] + '</b> has been awarded <b>
' +
this.point.value + ' $
</b> in <br><b> ' + this.series.xAxis.categories[this.point.x] + '</b>';
}
},
exporting: { enabled: false },
credits: {
enabled: false
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 3432], [0, 1, 32323], [0, 2, 23232], [0, 3, 0], [0, 4, 34064], [0, 5, 324], [0, 6, 33], [1, 0, 8292921], [1, 1, 34234234], [1, 2, 150895], [1, 3, 0], [1, 4, 432432], [1, 5, 312274], [1, 6, 532541], [2, 0, 1253412], [2, 1, 145933], [2, 2, 432423], [2, 3, 0], [2, 4, 2722052], [2, 5, 44284], [2, 6, 34324], [3, 0, 35434257], [3, 1, 0], [3, 2, 267659], [3, 3, 0], [3, 4, 4234320], [3, 5, 342340], [3, 6, 0], [4, 0, 1525929], [4, 1, 34073], [4, 2, 139196], [4, 3, 117], [4, 4, 0], [4, 5, 137038], [4, 6, 61571]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
Set overflow to none and crop to true:
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
example: http://jsfiddle.net/zwy3vhts/60/
Have an issue, probably I have mixed more things, then should be, but anyway it will be nice to figure this out.
Have an fiddle link with with code sample below
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: ''
},
plotOptions: {
column: {
stacking: 'normal',
events: {
legendItemClick: function () {
var index = this.index;
var legendName = this.name;
var series = this.chart.series;
series.forEach(function(el, index){
if(legendName == el.name) {
if(el.visible)
el.setVisible(false);
else
el.setVisible(true);
}
});
return false;
}
},
},
},
yAxis: [{
labels: {
format: '{value} $',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'First Y Axis',
style: {
color: Highcharts.getOptions().colors[2]
}
},
}, {
gridLineWidth: 0,
title: {
text: 'Second Y Axis',
style: {
color: Highcharts.getOptions().colors[0],
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
}],
xAxis: {
labels: {
rotation: -90,
groupedOptions: [{
rotation: 0,
style: {
rotation: 0,
}
}],
},
categories: [
{
name:'Apples',
categories: ['male', 'female']
},
{
name:'Oranges',
categories: ['male', 'female']
},
{
name:'Pears',
categories: ['male', 'female']
},
{
name:'Grapes',
categories: ['male', 'female']
},
{
name:'AppBananasles',
categories: ['male', 'female']
}]
},
series: [
{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
},
]
})
});
https://jsfiddle.net/9o64ybo4/
Using here highcharts and one of the highcharts plugins - grouped-categories plugin.
I have here some categories and subcategories and planned that 1-st subcategory (male) should appear below the first columns, and second one (female) should appear below the second column and so on.
As You can see there I have lost 2 top level categories like (Grapes and AppBananasles).
Any suggestions will be appreciated !
You need to assign a category to the point explicitly.
series: [
{
name: 'John',
data: [[0, 5], [2, 3], [4, 4], [6, 7], [8, 2]],
stack: 'male',
// pointPlacement: 0.15
}, {
name: 'Joe',
data: [[0, 3], [2, 4], [4, 4], [6, 2], [8, 5]],
stack: 'male',
// pointPlacement: 0.15
}, {
name: 'Jane',
data: [[1, 2], [3, 5], [5, 6], [7, 2], [9, 1]],
stack: 'female',
// pointPlacement: -0.15
}, {
name: 'Janet',
data: [[1, 3], [3, 0], [5, 4], [7, 4], [9, 3]],
stack: 'female',
// pointPlacement: -0.15
},
]
example: https://jsfiddle.net/9o64ybo4/1/
Point placement allows to move a column to the right/left, it may be needed because you have two stacks and each category create an empty space for the second stack.
The other approach, without different stacks, could be reorganise the data a little by adding null values.
series: [
{
name: 'John',
data: [5, null, 3, null, 4, null, 7, null, 2, null],
// stack: 'male'
}, {
name: 'Joe',
data: [3, null, 4, null, 4, null, 2, null, 5, null],
// stack: 'male'
}, {
name: 'Jane',
data: [null, 2, null, 5, null, 6, null, 2, null, 1],
// stack: 'female'
}, {
name: 'Janet',
data: [null, 3, null, 0, null, 4, null, 4, null, 3],
// stack: 'female'
},
]
example: https://jsfiddle.net/9o64ybo4/2/
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
As it is written in the Title i try to render a heatmap charts using highcharts.
I added a click event to change the color of one point when it is clicked.
But not all coordinates have data. As a result the points are not rendering correctly.
if i try to click the top left rectangle from the datalabel and below the wrong point is being colored.
Is this a bug?
Do i have to provide the whole set of coordinates in my data?
Here is a fiddle example of my problem
error example
(this doesn t apply to all scenarios where you don't the whole set of coordinates in your data. for example this works working example)
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
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>';
}
},
plotOptions: {
heatmap: {
cursor: 'pointer',
allowPointSelect: true,
events: {
click: function (event) {
if (event.point.shapeArgs && event.point.shapeArgs.fill == 'red') {
event.point.update({
color: null,
})
} else {
event.point.update({
color: 'red',
})
}
}
},
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 4, 67], [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'
}
}]
});});
If there is any data with 0 in the heatmap it is not aligned.
Set some data to 0 in the heatmap. The data with value of 0 is not aligned. Is there anything we can do to align it?
http://jsfiddle.net/yg0v13j6/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
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, 0], [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: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
});
It's a bug in 4.0.4 version, fixed on master branch: http://jsfiddle.net/yg0v13j6/1/
You can add:
format: '{point.value}',
to your dataLabels configuration and it will align the number properly.
I fixed the problem by upgrading from version 4.0.1 to version 4.2.5. So the error must have been fixed somewhere between those two versions. But it is not merely a bug in 4.0.4 (as it has been claimed) since I also experienced the problem in version 4.0.1.
Matheus Baumgart's fix about adding a format key to the JSON did not work for me.