I have an inverted columnrange chart in highcharts. I am able to create a unique label for the low and high point for each range.
But as the chart gets longer I would like to label each on the columns by their series name.
I need a third label? Possibly something above each range that would display the name of the series. So far, I'm using the formatter to give each point a unique label.
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === this.point.low) {
return 'low: ' + this.y;
}
if (this.y === this.point.high) {
return 'high: ' + this.y;
}
return 'blah';
}
}
}
},
My fiddle: http://jsfiddle.net/zeus6ky9/6/
I ended up adding an additional invisible series for each series already there. And creating a label for it.
Related
I am trying to plot time-series data using Highcharts histogram & would like to have some way to highlight the bar that contains the latest datapoint (it will be the last element in the array) and also have a custom tooltip for the same.
So let's say I am plotting average daily temperatures for a city over a 1 year period -- how would I highlight the bar that contains the latest temperature & also provide a tooltip that indicates the same.
Lets say, in THIS Highcharts example the last 3 in the data array is the latest temperature & I would like to highlight, as well as provide a custom tooltip for the bar with that value.
Something similar has been discussed HERE but it doesn't talk about highlighting the relevant bar.
You can update the last point in load event and add a flag to distinguish it in the tooltip's formatter function:
chart: {
events: {
load: function() {
var histogramSeries = this.series[0],
lastPoint = histogramSeries.points[histogramSeries.points.length - 1];
lastPoint.update({
color: 'red'
});
lastPoint.isLast = true;
}
}
},
tooltip: {
formatter: function() {
if (this.point.isLast) {
return '<b>Last point result: </b> ' + this.y;
}
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/cefy419v/
API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts.Point#update
I'm trying to change a single legend in Highcharts. Since Plot Lines and Bands can't have a legend, I've added an empty series so that when I select/de-select that legend, it would show/hide the plot lines. Since my plot lines are vertical, I used this (code below) as my working around:
legend: {
useHTML: true,
labelFormatter: function() {
if (this.name == "Empty Series") {
return '<div class="my-plot-line-symbol" style="padding-
left: 5px"> '+ this.name + '</div>';
} else {
return this.name;
}
}
},
...with the class being just a left border.
However, I cannot seem to remove the legend assigned to the empty series that I have. Basically it appears like this:
<> | My Plot Lines
(diamond as the default legend, "|" as the "class" I added)
How can I remove the default legend for that single empty series?
Set marker.radius for the empty series to 0:
series: [..., {
name: 'Collar',
type: 'scatter',
marker: {
radius: 0
}
}]
Live demo: http://jsfiddle.net/BlackLabel/uhcnr8mf/
API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius
Why are you returning HTML/JSX within the string? You could just simply do this..
return <div>
...
...
...
</div>
Is it not a valid syntax in vue.js? I'm actually working with React JS so maybe I'm wrong but atleast give this thing a try!
I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:
The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow
How can I show custom labels permanently in a Chart.JS doughnut chart using chartjs-plugin-datalabels?
The example looks now like this:
Under https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation, I found that the following code should change the labels to custom formatting:
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
Why doesn't this work in the example fiddle: https://jsfiddle.net/o4kyt69j/1/?
Okay, I didn't read properly...
Here's the solution: https://jsfiddle.net/o4kyt69j/2/
The code should be:
options: {
plugins: {
datalabels: {
formatter: function(value) {
return value + " kWh";
}
}
}
}
I need to use several series in tooltip in a highchart chart. These series should be completely invisible except tooltip. I 've tried setting visible to false. However in this case, legends for that series are still visible though faded. If I state "ignoreHiddenSeries: true", hidden series are not there at all and I cannot use them at tooltip. Is there a way for this type of usage? Currently I am keeping those series in global javascript arrays outside the highchart's scope and using them in tooltip formatter. I prefer to keep those data in highchart as well.
By the way setting showInLegend: false, visible: false also makes the series unusable in tooltip.
Each invisible serie should have two params:
visible: false,
showInLegend: false,
You need to use the tooltip formatter and use loop over each serie / each point to print values.
tooltip: {
formatter: function() {
var series = this.series.chart.series,
x = this.x,
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';
each(series, function(serie, i) {
each(serie.data, function(data, j){
if(data.x === x) {
txt += '<span style="color:' + data.color + '">\u25CF</span> ' + data.series.name + ': <b>' + data.y + '</b><br/>';
}
});
});
return txt;
}
},
Example: http://jsfiddle.net/697e8seo/