Some datalabels in my barchart aren't shown: Only one datalabel is shown at the categories "Wohnung Zustand", "Wohnumfeld" and "Wohn- und Nebenkosten".
My current solution is to chose a smaller font-size
dataLabels: {
style: {
fontSize: '7pt',
fontFamily: '"Tahoma"',
fontWeight: 'normal'
}
but now the label is hard to read. I'd like to have a bigger font-size and overlapping labels, but my overflow and crop-settings don't work.
There is an allowOverlap-setting: the chart with overlapping datalabels..
dataLabels: {
enabled: true,
allowOverlap: true,
}
Related
Is it possible to either:
A) Force An Annotation with a Shape: "Callout" to always show the connector line
B) Change text box shape conditions for a connector
Change shape to connector, you can also style how the labels looks.
labelOptions: {
shape: 'connector',
align: 'right',
justify: false,
crop: true,
style: {
fontSize: '0.8em',
textOutline: '1px white'
}
},
Demo: https://jsfiddle.net/BlackLabel/0617bh48/
Using the sample provided by highcharts (less some data for easier visability) https://jsfiddle.net/mevbg82z/2/
I'm trying to make the bubble labels ('USA', 'Canada', 'Mexico', 'Brazil') bigger.
I've looked at the series API for packedbubble but haven't found a way to increase the size of the text in the bubbles through options https://api.highcharts.com/highcharts/series.packedbubble
The only way I've found to do this is to write css, which doesn't handle scaling, doesn't center up, and generally seems hacky...
.highcharts-data-label text tspan {
font-size: 24px
}
Whats the correct way to increase the size of these labels?
Looks like you can set fontSize inside plotOptions.packedbubble.dataLabels
plotOptions: {
packedbubble: {
minSize: '20%',
maxSize: '100%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: true,
parentNodeLimit: true
},
dataLabels: {
enabled: true,
format: '{point.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal',
fontSize: '24px'
}
}
}
},
Highchart Legend rendering issue on Linux browsers, I think issue Happens in font family in highcharts. how to add custom font family to legend
Below added my code
title: {
text: c,
widthAdjust: -180
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
legend: {
itemStyle: {
width:'100px',
color: '#666',
textOverflow: 'ellipsis',
overflow: 'hidden'
}
},
To change the font family of the legend, you need to set fontFamily of legend.itemStyle like this:
legend: {
itemStyle:{
fontFamily: 'Comic Sans MS'
}
}
Working example: http://jsfiddle.net/sc3Lnfa9/5/
How can I show labels for each bar in Highcharts as shown in the image below?
I think the solution you are looking is some thing like this.
This canbe achieved using the datalabels and placing them properly at the position you have desired to.
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: 0,
verticalAlign: 'bottom',
inside: true,
color: 'white',
formatter: function(e) {
return this.series.name
}
}
}
},
You can set overflow to 'none' and crop to false to be able to display data labels out of the area plot.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
Example:
http://jsfiddle.net/5m0kkbhf/
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);