I only want to know if it's possible delete, or don't show, the frame in the middle of Gauge Chart that contains the value (below pivot). I got more than one serie and values overlap each other.
Thanks!!
One way is, you can format your datalabels and return nothing in the formatter () function.
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
}
}
Fiddled version. (tweaked from Highchart demo sample )
Hope this is you need.
Another option is
dataLabels: false
Documentaion: Gauge DataLabels enabled
Related
I am using a Area/line chart and plotting for 2 points. Also using a xAxis Label formatter property for customizing the label to display as follows. But when using this the chart is not generated. And also I tried to remove the formatter property, the chart id generated but the xAxis label is displayed as 0.5 [At least we need to get label text from categories]. I have included 2 jsfiddle url where we tried two approaches. Please help and provide solution for displaying the xAxis label what we provided in the categories.
JsFiddle:
http://jsfiddle.net/jw2p5Lxa/17/
http://jsfiddle.net/p2EYM/116/
labels: {
formatter: function() {
return this.value.substring(0, this.value.indexOf('_'));
}
Thanks in advance!
You've essentially told the chart, with your min and max values, to cut off the first and last label.
Get rid of this:
min: 0.5,
max: categories.length - 1.5,
And use this:
minPadding:0,
maxPadding:0,
Updated Fiddle:
http://jsfiddle.net/jlbriggs/p2EYM/118/
Output:
You can save categories in an array and use xAxis.formater() to display specific label in your first example:
var categories = ['Jan 12_Jan 12', 'Feb 12_Feb 12'];
formatter: function() {
return categories[this.value];
}
Also, do not use min and max properties. In the second example getting rid of min/max should be enough.
Examples:
http://jsfiddle.net/jw2p5Lxa/21/
http://jsfiddle.net/p2EYM/120/
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
I'm eager to find out if its possible to place last value in series to yAxis in highcharts.
It supposed to be simple label with last point value shown on the right side of the charts, dinamically chanhing when we add points to the chart.
thanks!
There are probably several methods.
One that I would use can be seen in this example:
http://jsfiddle.net/jlbriggs/zXLZA/
data: [7,12,16,32,{y:64,dataLabels:{enabled:true}}]
This makes use of the datalabels, which are enabled only for the last data point.
The downside to this is that you need to specify that in your data. Not hard to do, but may not fit your needs.
Another way would be to use a second y axis, and the tickPositions property:
http://jsfiddle.net/jlbriggs/zXLZA/4/
Another possible solution is to use tickPositioner with second yAxis. In such case with dynamic data, everything will be computed itself, see: http://jsfiddle.net/3c4tU/
tickPositioner: function(min,max){
var data = this.chart.yAxis[0].series[0].processedYData;
//last point
return [data[data.length-1]];
}
to get the highest value in any axis and series, use the function getExtreme(). It will find you the extreme value (highest or lowest depending of the argument you put behind). Select the chart, the axis and the series before.
here's an example: (whith your chart associated to the variable 'yourChart')
var highestValue = yourChart.yAxis[0].getExtremes().dataMax;
It will return the highest value of the first Y-axis' associated series.
While this below will return the lowest of the second X-axis' associated series:
var lowestValue = yourChart.xAxis[1].getExtremes().dataMin;
My recommended solution:
plotOptions: {
areaspline: {
fillOpacity: 0.2,
dataLabels: {
enabled: true,
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
formatter: function() {
if (this.x == this.series.data[this.series.data.length-1].x) {
return this.series.name + ': '+this.y;
} else {
return null;
}
}
}
}
}
we can make use of formatter for this
here is an example to display the last value
http://jsfiddle.net/kgNy4/1/
here is an example to display maximum value
http://jsfiddle.net/kgNy4/
In the example I have put
dataLabels: {
enabled: true
}
so that formatter function will be executed
I hope this will be useful for you
I have a Highcharts line graph that has dataLabels configured in the plotOptions. This is all working well and I have a nice label displayed over each point.
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return '$' + Highcharts.numberFormat(Math.round(this.y),0,0,",");
}
}
}
}
However, is there a way to set an interval that determines how often the dataLabels appear over the points? I want to show every point in my graph, but due to space constraints, only show the dataLabel every 2 or 3 points.
Edit:
Difficulty level: My graph has multiple y-axes, uses datetime for the x-axis, and has irregular data.
http://jsfiddle.net/SQkMW/68/
Yes, you could just return a blank string if the point x mod 2 is 0, for every 2nd to show up, for example (http://jsfiddle.net/HzYtV/):
formatter: function() {
if(this.point.x % 2 == 0) return '';
return this.y +'mm';
}
For datetime axis you will have to create a variable and increment it manually http://jsfiddle.net/SQkMW/69/
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;
}
}
}
}