I have a custom chart here
I have set label property as
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
},
align:'center',
x:150
}
I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.
what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.
Here is the way I found it.
Instead of using static values,
I used useHTML, and positioned labels by CSS styles.
labels: {
useHTML:true,
formatter: function() {
return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
}
}
Simple example here
Related
Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown
https://codepen.io/SophTooke/pen/ExorZZj
[enter code here][2]
Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
formatter: function() {
let chart = this,
weight = chart.point.weight;
return `Weight: <span>${weight}</span>`
}
},
}
},
Demo:
https://codepen.io/sebastian-hajdus/pen/BarjMap
API References:
https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter
https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML
I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
As I am forcing Highcharts to show the last label on the xaxis, this last label is partially hidden, or partly disappears:
Why is that? And what can I do? Setting the »marginRight« in the »chart« settings does not do the trick.
Thanks for any hints.
You can set align: 'right' attribute for the last label:
chart: {
events: {
render: function() {
var ticks = this.xAxis[0].ticks;
Highcharts.objectEach(ticks, function(tick) {
if (tick.isLast && tick.label.xy.opacity) {
tick.label.attr({
align: 'right'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/tv5f0x2a/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.objectEach%3CT%3E
This might be the chart container width being too small, or the chart itself is too small.
You should try:
have you tried changing chart width? https://api.highcharts.com/highcharts/chart.width
try making the container for the chart wider
I'd like to add an extra x-axis label to the end of a chart, like in the image below.
Is this possible?
I've checked out the API but don't see anything about adding or modifying single labels.
Thanks!
You can use the formatter function to customize the labels:
xAxis: {
labels: {
formatter: function() {
if (this.isLast) {
return 'Now'
}
return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5s3gbawr/
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Is there a preferred way to eliminate or aggregate labels below a certain threshold when using HighCharts pie chart? I'd rather not have to rollup all values below a certain percentage into 'other' if I can. I've checked the docs and can't find anything. It would be very useful!
Thanks in anticipation.
The best way to achieve this is to use dataLabels formatter for pie chart like this:
plotOptions: {
pie: {
dataLabels: {
formatter: function(){
if (this.percentage < SOME_VALUE) return "";
return VALUE_TO_SHOW;
}
}
}
}
Replace SOME_VALUE and VALUE_TOSHOW with desired values. But there will be some problems if you're using connector for you labels (it is always visible).
A very late answer to this question:
If instead of returning empty string, you instead return null, the label AND connector will not show, and you'll be able to achieve this effect without removing the connector:
Example: jsfiddle
plotOptions: {
pie: {
dataLabels: {
formatter: function(){
if (this.percentage < SOME_VALUE) return null;
return VALUE_TO_SHOW;
}
}
}
}