From http://s831.us/ySLjng
I am developing my own custom Axis Formatter. I would like the yAxis and Point labels to render values differently depending on the type of data being displayed (e.g. volume, percentage, US dollars, British Pound, etc.)
It is not possible to determine the type of data from just the single value or point. The context of the type of data is set on the series or chart. It is not set once statically. I retrieve different data sets dynamically using based on users inputs (e.g. financial instrument symbol .DJI, AAPL, BP.L, etc.).
I have not found a way to access the series or chart context from the Axis or Tooltip formatter. I have also not been able to find a way to reset the formatter in the Ajax "success" handler.
Any suggestions?
UPDATE: The original question asked about context for both the Axis and Tooltip Formatter.The Tooltip formatter does get the series via this.series. I haven't found an analogues context in the Axis Formatter.
It's not part of an official release yet, but I just added axis and chart to this-context in the axis formatters, so the following is now possible:
yAxis: {
labels: {
formatter: function() {
console.log(this.axis); // Current Axis instance
console.log(this.chart); // The Chart instance
return this.value +' - ' + this.chart.options.chart.renderTo;
}
}
}
Example on jsfiddle
Link to the latest development version of HighCharts
Related
I've got a chart that uses time data for both the X and Y axis. I'm able to get both axes to convert my millisecond data into HH:MM:SS. How do I get Y axis tooltip to display HH:MM:SS too? API suggests it's possible, however I'm unable to replicate.
tooltipValueFormat: String
Parallel coordinates only. Format that will be used for point.y and available in tooltip.pointFormat as point.formattedValue If not set, point.formattedValue will use other options, in this order:
yAxis.labels.format will be used if set
if yAxis is a category, then category name will be displayed
if yAxis is a datetime, then value will use the same format as yAxis labels
https://api.highcharts.com/highstock/yAxis.tooltipValueFormat
See my fiddle for example
https://jsfiddle.net/gramlich/jpnsujo8/1/
Not to further complicate things- I am doing this in a Django View, and passing the chart options via JSON to minimize my need for JS. If possible, I'd like to use a solution using only objects found in the Highcharts API; rather than resorting to writing my own Formatter function in JS.
Thank you for your help!
You can use pointFormat passing the formatting string like:
tooltip: {
pointFormat: '{point.y:%M:%S}'
}
Here's a working fiddle: https://jsfiddle.net/w4f9suzb/
I'm using a Datetime axis in Highcharts to show a series of columns, and I'd like the date of the data point to appear directly beneath the column rather than a generic time marker as seen in this fiddle: http://jsfiddle.net/4s7t6jg6/2/
$(function () {
$('#container').highcharts(
{"chart":{"type":"column"},"xAxis":{
"dateTimeLabelFormats":{"month":"%m/%e"},
"type":"datetime"
},
"series":[{"data":[{"x":1406332800000.0,"y":358.0},
{"x":1408838400000.0,"y":417.0},{"x":1411344000000.0,"y":358.0},{"x":1416355200000.0,"y":323.0},{"x":1418860800000.0,"y":408.0},{"x":1421366400000.0,"y":280.0},{"x":1423872000000.0,"y":305.0},{"x":1426377600000.0,"y":314.0},{"x":1428883200000.0,"y":331.0},{"x":1431388800000.0,"y":412.0},{"x":1433894400000.0,"y":279.0}]}]}
);
});
To be more specific in case I'm not describing it well, instead of the xAxis reading "09/1, 11/1, 01/1, etc" as it does currently, I would prefer it read "07/26, 08/24, 09/22, etc".
You can use the tickPostions property for this.
Provide your timestamps as an array of values to the property, and it will draw a tick at each stamp.
Example:
http://jsfiddle.net/jlbriggs/4s7t6jg6/3/
Reference:
http://api.highcharts.com/highcharts#xAxis.tickPositions
The default Tooltip formating for Fusion Chart is :
Series Name, X-axis Label, y-axis value
I want to format it like:
X axis Label\n
Series 1 Name: Series 1 Y axis Value
Series 2 Name: Series 2 Y axis Value
and so on ..
Is there any way to format the tooltip as like HighChart Tooltip formatter?
The feature you are looking for is not possible using data configuration alone and is being planned for coming releases.
A very neat workaround is to use the beforeDataUpdate event and add toolText programmatically to the data.
You can get details of FusionCharts events at http://docs.fusioncharts.com/maps/Contents/javascript/API/events.html
I have a scatter series with two points that have the same coordinates. Each point has different data associated with it (for example weight and height of different people - two different people can have exactly the same height and weight):
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:'thomas'}]
}]
Full example at jsfiddle.
When viewing the tooltips of the chart, the tooltip of the second point shows:
Oren: 193.7,90.7
Making the data of josef inaccessible.
I would like to make the data of both josef and oren accessible, for example by putting them inside of the same tooltip.
Oren: 193.7,90.7
Josef: 193.7,90.7
How would you achieve this effect?
assume a very large data set - iteration over the entire series each time is not an option.
You could use the Tooltip formatter ( http://api.highcharts.com/highcharts#tooltip ) to manually format your tooltips.
In the formatter compare x and y value of all other points in the series(this.series) If the values are the same, add the name of these points to the tooltip.
I am trying to use the setFormattedValue() function from the DataTable class to modify the look of the labels across the horizontal axis on a line chart, but the values are not being formatted. The labels remain in their default values created by setValue().
For example, the following code does not produce 00:36:45 on the axis, but rather, just 2205.
var table = new google.visualization.DataTable();
table.addRows(1);
table.addColumn('number', 'time');
table.addColumn('number', 'altitude');
table.setValue(0, 0, 2205);
table.setFormattedValue(0, 0, '00:36:45');
table.setValue(0, 1, 35);
var chart = new google.visualization.LineChart($('chartdiv'));
chart.draw(table);
I don't understand what I'm doing wrong. Shouldn't setFormattedValue() cause the label to be shown as 00:36:45 instead of 2205?
If this isn't the right way to change the look of the axis labels, then how should it be done? I can't change the column type to string because the plotted line is based on numerical x/y coordinates.
You said you can't change the column type to string but, can you change it to Date? The axis is showing a number because you declared both columns as number type.
I can't see the relation between 00:36:45 and 2205. Is 2205 a value you get at that time? If you drawed more points in your line chart, you could check if their labels are the formatted value you are setting.
Partial solution:
replace chart.draw(table); with:
chart.draw(table, {
hAxis: {
ticks: [
{v:2205, f:'00:36:45'},
{v:35, f:35}
]
}
});
ticks allows you to map any value and its representation on the axis, but i think you have to list values for all labels you want. (But this could be automated by custom script)