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/
Related
I have a problem with multiples series data. I have three series data (sometimes two), where the x values are dates and the y values are numbers.
I'm not able to sort the column bar based on date.
I reproduced the issue here: https://playground.anychart.com/WuqV384h
As you can see, the series data are showed as are written inside the "series" key. The dates should be sorted from 2019 to 2020.
A similar issue was asked here.
However, even using the DateTime, I'm not able to visualize the dates in the right order. If I use DateTime, the chart doesn't show the real value of the date (es. x: 2020-02-02), and the chart doesn't fit the container.
Thank you in advance.
The Cartesian Column chart uses an Ordinal scale. It doesn't provide any sorting because the Ordinal scale works with categories (names), it doesn't differ dates or names.
So, there are two available solutions:
Use real dateTime xScale that sorts points automatically. But it is a linear scale. Here is the sample.
Use the ordinal scale, but in this case, you need to preprocess your data to get the sorted array of categories and apply it to the xScale. Here is the sample.
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'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
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.
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