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.
Related
I want to be able to click a button and toggle y-Axis plotOptions from series rendering by absolute value to compare by percent change.
I have played with jsfiddle here https://jsfiddle.net/pn5md4rz/1/
What I have noticed is that if I enable plotOptions in the options it will render always by change of value or percent change, but if I remove it (commented) it will always render by value. I want a way to switch between both modes of y-axis through button toggle.
You need to add click event callback function to the button and update the chart in that function with variable compare and showInNavigator values.
document.getElementById('toggle-button').addEventListener('click', function() {
compare = compare ? false : 'value';
chart.update({
plotOptions: {
series: {
compare: compare
}
},
series: [{}, {
showInNavigator: !!compare
}]
});
});
Live demo: https://jsfiddle.net/BlackLabel/bz3are69/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
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/
Can you please demonstrate a use case for this property in the pie chart:
http://api.highcharts.com/highcharts#Point.total
How it can be used?
Here you are: http://jsfiddle.net/tu67e1ce/
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>, Total: {point.total}'
},
Hover any of the slices, and see total value in the tooltip. You can also use that value in the data labels formatter etc.
In a scatter HighCharts plot, I want to set some properties only for some data points of my series. Here is a toy example:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
type: 'line',
data: [[1,1],
{x:3,y:2,marker:{enabled:false}},
[4,1]]
}]
});
});
});
I need (in decreasing order of priority) the second point to NOT have:
the marker (already done in my code, working);
the tooltip (tried but without success, I don't know how to do it working)
the line coming from previous point (tried but without success, I don't know
how to do it working)
Here is a jfiddle version.
For your second point, improvised from a similar answer:
Disable tooltip on certain points in Highcharts
tooltip: {
formatter: function() {
if (this.point.x != 1) { //enable for each point except the second point
return this.x;
}
else return false;
}
}
for your third point you might try to use a trick. If you set the y value as null, that point won't be displayed in the line. So draw your line, and enter two data with null y values to create a lonely point on the chart.
Here is an example: http://jsfiddle.net/8U8nx/14/
I'm pretty clueless at this point, on some of my charts I am giving these options:
var plotOptions, yAxis;
plotOptions = {
series: {
compare: 'value'
}
};
yAxis = {
labels: {
formatter: function() {
return this.value;
}
},
plotLines: [
{
value: 0,
width: 2,
color: 'silver'
}
]
};
And the chart still displays percentages in the y-axis, just without the % sign. I did a console.log of 'this' in the formatter tag, and the value attribute is correct (that is, returning the value instead of a percentage, but it doesn't seem to be applying it to the chart. Any thoughts?
I actually just ended up using a spline chart instead. Basically what I was trying to say was that the y-axis was displaying the same values where I used "compare: 'percentage'" or "compare: 'value'", but the spline chart seems to be rendering the labels as the actual data points (4000 as opposed to 25%).