In HighCharts series can have a color (black) and a negativeColor (red) for positive and negative values easy like this:
series: {
color: 'black',
negativeColor: 'red'
Is there an easy way to do the same for the labels?
plotOptions: {
series: {
dataLabels: {
style: {
color: black
//no negativeColor...
There is no built-in option like that. Still, you can define a data label for each point and set a proper color if the value is negative.
data: data.map(function (point) {
return point < 0
? {y: point, dataLabels: {color: 'black'}}
: point;
})
example: http://jsfiddle.net/s8ay794r/1/
Related
I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?
The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/
I have a chart with two combine chart types, line and column. I would like, as in the image below, to have my column chart at the bottom and my line chart a bit higher up and the line chart label to start hihger up as well.
I want something like:
yAxis: labels{y: -100}
My problem with this is that this only moves the labels, not the chart data.
My try so far can be found here: http://jsfiddle.net/32r7rctt/2/
It is possible to set 'height' and 'top' properties of the yAxis. Example: https://jsfiddle.net/mtvy24rj/1/
yAxis: [{
height: '70%',
top: '0%'
}, {
title: {
text: null
},
height: '30%',
top: '70%',
labels: {
enabled: false
},
}],
I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.
},function(chart){
chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})
This works fine, except for the fact that the left border stroke doesn't show the full width i.e.
These are my plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
stacking: 'normal',
pointPadding: 0.1,
borderWidth: 0,
lineWidth: 0,
dataLabels: {
enabled: true,
formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
useHTML: true,
connectorWidth: 1,
style: {
fontSize: "14px",
color: '#FFFFFF',
fontWeight: 'normal'
}
}
}
},
Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:
AFTER HOVERING
Any pointers to resolving either of these issues would be appreciated.
FIXED - Hover Issue
I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.
If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}
FIXED - SVG Border issue on Stacked charts
It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.
$(".highcharts-series:gt(0) rect").each(function(index,value) {
$(this).attr("height",$(this).attr("height")-1);
$(this).attr("y",parseInt($(this).attr("y"))+1);
I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.
I have two series that should we plotted on the same graph, as is shown in the example,
how can I 'sync' the axis so that both '0' (origin) lines align?
I cannot use the linkedTo property because then the values are the same as well, while these should be independent. Only the position of the 0-line should be the same.
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}
Something similar is done here, for first button: http://jsfiddle.net/Fusher/5m9JW/
It's not perfect solution, but allows to manage that in afterSetExtremes
You can try to use min value for second (column) yAxis, with negative value.