I want to treat the negative portion of the y-axis (below 0), as if it were above zero -- because I'm plotting something else above 0. So, basically, I want to remove the negative symbol on Highstock's negative y-axis to make it look positive, just upside down. (I'm still going to enter the data with a '-' symbol so that it gets plotted below 0, but leaving the negative symbol there would be confusing)
Also, for the tool tip, is there an easy way to, say, multiply the value by -1 so that it shows up positive as well?
Does anyone know how I might do this?
thanks,
Andrew
Use the formatter function to manipulate the label appearance:
yAxis: {
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
},
You can do the same for the tool tip as well:
tooltip: {
formatter: function() {
return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
}
},
See example here.
Related
I have an issue where I have nested array data set consisting of [x,y] coordinates for a spline or scatter chart in rails LazyHighCharts, and the y coordinate is the date, in milliseconds, such as 1776600000000.
Is there such a thing as yDateFormat for tooltip ?
It seems logical there would be, since there is a:
tooltip: {
xDateFormat: '%Y-%m'
}
The whole idea is that when I mouse over a data point on a spline or scatter chart(I'm trying either option), the date will popup. But right now the date is popping up in a huge ms number, 1776600000000. I am not getting a fix to day.
Additionally, perhaps it would be nice to also include a pointFormat for something like:
tooltip: {
pointFromat: "Yada yada {point.y} and yadayda {point.x}"
xDateFormat: '%Y-%m'
}
Also for my y-axis settings, I have:
`chart.yAxis(title: { text: 'Yadayada'}, type: 'datetime' )
Any help appreciated. Pretty new to highcharts, and relatively newer to Rails
From Highcharts site you can use the formatter callback to return wanted date format.
Demo: https://jsfiddle.net/BlackLabel/4pf1xw02/
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.y)) +
' date';
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
When I have the following data supplied to Pie chart: [[0],[0],[0]], the chart is empty.
However, I want to make the pie show three slices, with each percentage distribution equal to 33.3%
I know it is better to use bar / column chart in this case, however I have this edge case where I need to show 0 data in Pie chart
Workaround:
Set some nonzero value and add isZero flag for every point. Then use this flag in tooltip.pointFormatter:
tooltip: {
pointFormatter: function() {
return "<span style='color:" + this.color + "'>\u25CF</span>" + this.series.name + ": <b>" + (this.options.isZero ? 0 : this.y) + "</b><br/>";
}
}
This will cause that your points will be visible and 0 will be printed in tooltip if the hovered point has isZero flag set to true.
Live demo: http://jsfiddle.net/BlackLabel/52a1xh99/
I have 3 datasets within my series (low, normal, high) displaying on a scatter plot.
How can I force the tooltip and markers to be enabled only for the normal data set?
Many thanks
formatter: Function
Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
Reference:
http://api.highcharts.com/highcharts#tooltip.formatter
See shared tooltip formatter. It gives you better control over the tooltip.
http://api.highcharts.com/highcharts#tooltip
EDIT: I have added some code. See the custom tooltip formatter;
tooltip: {
formatter: function () {
if (this.series.name == "Male") {
return "<b>" + this.series.name + "</b><br>" + this.x + " cm, " + this.y + " kg";
} else return " ";
}
}
See the fiddle for example: http://jsfiddle.net/androdify/cweC6/
This solution is for keeping tooltips on all series, but only display one tooltip at a time corresponding to the point actually hovered over.
Look through the code for where it is specifying a variable by the name of hoverPoints and change it to this:
{hoverPoint:l,hoverSeries:b,hoverPoints:l?[l]:[]}
This is the code for Highstock, so if you are using vanilla Highcharts you may need to change variable names around a bit. To explain how this works, the default value for hoverpoints is an array of all points on that spot on the x axis. Changing it to an array containing the single point that you actually hovered over, the value of hoverPoint, causes highcharts to ignore the other hit points.
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/
When styling a chart axis, a common style in publications is to include the unit or percentage sign only on the topmost label of the Y-axis. I am trying to figure out how to do this in Highcharts.
I know I can hard-code a number, like this:
yAxis: {
labels: {
formatter: function() {
if ( this.value == 12 ) {
return this.value + "%";
} else {
return this.value;
}
}
},
But this is not a very flexible solution.
Is there a way to test for the first (or nth) value displayed? Is there a way to get the index of a value within the formatter function?
2013 Update
This works in most circumstances:
if ( this.value == this.axis.getExtremes().max )
return this.value + '%';
else
return this.value;
However, it does not work if you have yAxis.endOnTick set to false—because in that case the maximum value of the axis is not the same as the highest label on the axis.
Is there a way to get that highest label from within the formatter function?
As far as I know, it isn't possible to find the 'nth' item on an axis, but first and last can be dome using the properties this.isFirst and this.isLast' in stead of checkingthis.value`
If you want to, you can also access the axis itself directly using this.axis, so you should be able to run whatever complex logic you want on the axis itself..
With 4.2.x version of highchart I have achieved it with following code
labels: {
formatter: function () {
if(this.isFirst)
return this.value + "%";
else
return this.value;
}
}
}
You could also add [%] to the name of the yAxis. Then you wouldn't have to tamper with the ticks.
You can draw at max value plotLine and after extremes are changed - remove and add new one). Then label for that plotLine you can set as '%' and move to the left side.
Another solution is to use axis title - set it to top and remove rotation.
The last solutions (or rather workaround) is to use second yAxis, and set there min and max(or tickPositions), and show only last label, and first hide.