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
Related
I am trying to implement crossfilter along with highcharts. In the dataset, I have a key called 'date'. The values in the date key is of the form 'yyyy-mm' (for ex, 2018-04).
While implementing, I want the X axis to contain the dates in the format described here: for 2018-04, it should display June-18, and so on.
I was able to implement this by extracting the month and year from the date key. But, whenever the category names in the x axis is different from that given in the dataset, the crossfilter is not working correctly, i.e, whenever I click on any of the bars, every other chart's value is updated to zero. But when I set the x axis's categories back to the form given in the dataset, it works fine.
I was able to implememnt this through xAxis.labels.formatter
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 have a Highcharts line chart with multiple series. The X axis is a datetime axis. One series is a step line and the max data point for this can finish before the other series on the x axis, e.g. 5 days before the end.
Is there an easy way of extending this line to the end of the chart automatically without filling in the extra data points before the data is passed to Highcharts? The line should just carry on to the end of the chart at the same y coordinate as the last plotted point.
I have already tried setting minPadding and maxPadding to 0 along with start/endOnTick to false, but this had no effect.
Thanks!
See answer here:
continue the line drawing on dotnet highchart
The basic idea is to
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.
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)
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