I've created a composite chart which combines a line chart with two overlapping event series.
I would like each event to appear exactly as shown, but with a tooltip showing start and end times of the event, and a short description with with a link.
By default (no name/label/description defined for the data point), the tooltip shows the start/end times, nicely formatted (and for some reason with the label '{series name}: false').
However if I define a name/label/description (as for the first event in series 2 in this jsfiddle ):
None of these values appear in the tooltip
The start/end times now appear as unformatted numbers
{
"name": "My Name",
"label": "My Label",
"description": "My Description",
x: Date.UTC(2014, 10, 21, 3),
x2: Date.UTC(2014, 10, 21, 5),
y: 1
}
How can I decide the content and format of the tooltip? Thanks in advance!
You can use the series.tooltip.pointFormatter callback to customize your tooltip.
Demo: http://jsfiddle.net/BlackLabel/twjasmqo/
API: https://api.highcharts.com/highcharts/tooltip.pointFormatter
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
I've added a series to a chart:
chart.addSeries({
id: 'child-bmi-scores',
name: 'Child\'s BMI',
color: 'blue',
type: 'scatter',
showInLegend: false,
data: [ [3, 20], [10, 16] ]
});
and later on, I want to add a point to that series. So I've done that:
var chart = chartContainer.highcharts();
var series = chart.get('child-bmi-scores');
series.addPoint(
{
x: 16.5,
y: 19,
height: 456,
weight: 789,
ageYears: 16,
ageMonths: 6
}
);
The point does get added, but the trouble is that the blue marker is not visible.
You can see from the image below, the two visible blue squares are from the initial data: [ [3, 20], [10, 16] ], and you can see the crosshairs focussing in on the newly added point - it's definitely there, but without the crosshairs hovering over the point, you just don't see it.
The other curves that you can see are all areaspline series also on the chart.
I'm wondering if the Z-order has got messed up and the new point is somehow behind one of the area splines?
I created a fiddle that demonstrates what I mean:
http://jsfiddle.net/j08L6afh/
So before you click the "Add point" button, hover around and prove there are only two scatter points. Then, if you click the button at the top, then it will add the point, you'll be able to find it by hovering your mouse near and getting the crosshairs, but you won't see the marker.
UPDATE
I removed the curves off the chart, so that the scatter was the only series:
http://jsfiddle.net/j08L6afh/1/
Now you can see it works as expected, so it would appear to be being hidden by one or more of the curves. How can I make the new point at the front?
So I solved this by doing a .push onto an array of measurements, and reinitialising the entire chart.
It worked, but I imagine there is a better way?
I have a Highcharts instance [1] with 4 series. Two of the series are index/ratio series and two are raw value series. What I would like to do is display the raw value series points on one of the index series without converting the raw value series to 'flags'. The reason for this is that I want all my point values to be in one tooltip.
With respect to the attached jsfiddle I would like the center buy and sell points to appear on the 'Price Change' series and for the current tooltip behavior in the example to be unchanged. I want one tooltip with four values and for the buy/sell values to be their raw values instead of the 'y' value of where they are displayed.
Is that something that is doable with Highcharts/Highstock?
[1]: http://jsfiddle.net/eZL8e/
Dave
You can easily manipulate what you want to display in tooltip using pointFormat for each series. Then you can change fromat for point from [timestamp, value] to {x: timestamp, y: value, myProperty: exValue}. Simple example: http://jsfiddle.net/eZL8e/5/
For buys:
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.raw}</b><br/>'
},
data: [
{x: 1374555600000, raw: 21.13, y: 75},
{x: 1374642000000, raw: 20.5753, y: 85},
{x: 1374728400000, raw: 20.9367, y: 63}
]
Note: There is only one limitation for that solution, you need to disable dataGrouping, since grouped point's doesn't have custom properties like raw.
If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array
Using the Candlestick highstock chart,(http://www.highcharts.com/stock/demo/candlestick), I want to have the best last bar a custom candlestick where its available values are High and Low only? This is typical for a forecasting scenario where we would like to predict tomorrow's candlestick would likely to have a certain High (of the day) and Low (of the day). We are not so much concerned about its possible future open or close values. In the end, this (last) candlestick on the chart should look like a Line and not a bar.
Any idea much appreciated?
Use column/columnrange series, with pointWidth: 1. Setting example:
data: [{
low: 10, // low
y: 12, // high
x: date
}]
Another solution is to use scatter series with lineWidth: 1, for example:
data: [{
y: 10, // low
x: date
},{
y: 12, // high
x: date
}]