how to hide datalabels of a heatmap based on condition i.e. i want to hide all the datalabels which are (==0 or <50). As there is a bug in Highcharts api, when ever i restore the browser the zero's show up in unusual order.
Bug Link
As of now i found a workaround replacing 0 with '0' but i dont want to show that on the heatmap. Here is the fiddle jsfiddle , in fiddle its working but when implemented on application it's replicating that bug.
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
plotBackgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.03, 'rgb(247, 88, 45)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
}
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: 'transparent',
maxColor:'transparent'
//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, 0],[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]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});
I'm using Jasper studio the workaround snippet is
series.dataLabels.formatter:{function(){ if(this.point.value == 0) { return '0';} else { return this.point.value;}}}
The simples way is using datalabels formatter which allows to add condition.
plotOptions:{
series:{
dataLabels:{
formatter:function(){
if(this.point.value >=50)
return this.point.value;
}
}
}
},
Example: http://jsfiddle.net/4aqhB/246/
Related
I am after making high charts graph and tooltip when it is 100 + and 1000 + Have a symbol after it on the toolbar but also have it so that shared: true. Also on the graph when it is say 2394 I am after it to round it down to 2.39 so the graph is not so large and then on the tool bar it would show 2.39K.
I have tried quite a bit and I am not able to figure this out look all over stack overflow and not found anything.
http://jsfiddle.net/sb7n32zn/22/
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
backgroundColor: 'transparent',
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
itemStyle: {
color: '#c4c4c4',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
title: {
style: {
display: 'none'
}
},
plotOptions: {
series: {
lineColor: '#808080'
}
},
pane: {
size: '80%',
},
xAxis: {
categories: ['Win Rate', 'Kills', 'Deaths', 'Assits',
'Minions Killed', 'Gold Earned', 'Damage Dealt'],
tickmarkPlacement: 'on',
lineWidth: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
gridLineColor: "#808080",
gridLineDashStyle: "Solid",
gridLineWidth: 2,
labels: {
style: {
color: '#c4c4c4',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
},
series: [{
name: 'Aatrox',
color: 'rgba(184, 70, 70, 0.7)',
data: [3843, 7, 7, 6, 15.7, 11.78, 22.05],
pointPlacement: 'on'
}, {
name: 'Gay Something',
color: 'rgba(85, 184, 70, 0.5)',
data: [6245, 9, 6, 5, 18.6, 13.54, 23.46],
pointPlacement: 'on'
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 450px; height: 400px; margin: 0 auto"></div>
This is what i currently have:
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>',
}
You can use the formatter option in tooltip for more complex formatting. See:
tooltip: {
shared: true,
formatter: function () {
console.log(this);
var txt = this.x + ": <br />";
for(var i=0;i<this.points.length;i++){
var value = this.points[i].y;
if(value>=1000){
value = (value/1000).toFixed(2) + 'k';
}
txt = txt + '<span style="color:' + this.points[i].color + '">'
+ this.points[i].series.name + ': <b>' + value + '</b><br/>';
}
return txt;
}
},
In this function if your series value is more or equal than 1000, then it divides by 1000 and fixes 2 decimal cases, furthermore, it adds the 'k' label in the end.
However, the graph is still large because the value is a lot bigger than the others. I think you have to do a preprocessing of the data for that.
Hope it helps! :D
Here is the code link: https://jsfiddle.net/chong789456/a77pj67b/3/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ["c1", "c2", "c3", "c4"],
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
useHTML: true,
formatter: function() {
var tooltip = '';
tooltip = '<b style="color:' + this.point.series.color + ';">Type: </b>' + this.point.series.name + '<br>';
tooltip += '<b style="color:' + this.point.series.color + ';">Clicks: </b>' + Highcharts.numberFormat(this.point.y, 0, '.', ',') + '<br>';
return tooltip;
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
minPointLength: 10
}
},
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,0,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
0,0,0,0
]
},
],
});
I have 4 categories(c1,c2,c3,c4) and 2 series(orange,apple).
The issue is, for category c4, the orange's number is 34 and the apple's number is 0, only apple showns in c4 as you can see in the chart. I want orange shows there and the tooltip should also show something like:
Type: Orange
Clicks: 34
I'm confused that Orange doesn't show in C4 as its clicks is not 0. Anybody can help? thanks tons!
=================================================
I have fixed this issue now! : ) Here is the link:
https://jsfiddle.net/75zk3w08/1/
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,null,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
null,null,null,null
]
},
],
The only different of these 2 examples is the series section. If i set the value to null, then it won't show in the chart.
you can set the yAxis: {min: 0, max: 100}
minimum and maximum of y axis.this will affect y-axis scale As in your example
you are only setting minimum y axis please check the below
I try to draw a heat map (50 x 100) using Highcharts. I noticed that the the chart is not displaying properly when my data values are in wide range (from 0 to 5,000,000). However, if I change my data values to smaller range (for example from 0 to 1) the chart seems to be okay.
$('#heatmap').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
zoomType: 'xy'
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
title: {
text: 'Sample title yo'
},
xAxis: {
categories: xCategories,
title: null
},
yAxis: {
categories: yCategories,
title: null
},
colorAxis: {
min: min,
max: maxv,
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: 'Lorem ipsum',
borderWidth: 1,
data: data,
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
Here's my fiddle: http://jsfiddle.net/bpp8ahyc/4/
Is there anything I can do to show large values?
You need to increase value of turboThreshold or set as unlimited (by 0).
plotOptions: {
series: {
turboThreshold:0
}
}
Example: http://jsfiddle.net/bpp8ahyc/5/
I'm currently working on a web project for showing traffic usage in chart mode, and I'm using Highchart Bar for this project.
The problem is, when I run this code it doesn't give error at all
<script type="text/javascript">
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D', ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
3,5,1,1, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
</script>
But when I'm increasing the data categories into A, B, C, D, E, F, and G with each categories values respectively: 2,1,1,17,1,43,6,5, the script doesn't show any graph at all. Any ideas?
I dont think anything is wrong.
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D','E','F','G' ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
2,1,1,17,1,43,6, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
test the fiddle
let me know your comments.
Please start with small data...
Like first try to display A,B,C ..
then A,B,C,D ..if success then add one more E..
Do small steps then check at which point that graph does not show..
On this way may solve you problem.
Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});
A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}
Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});