Building upon my previous question here SO
I want to reach this desired affect on mouse hove. Draw multiple series like so
Could you please recommend highstock best practice for the same?
Thanks
You can add an additional series in the first mouseOver event and then update its data. For example:
series: [{
data: [...],
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
if (!chart.series[1]) {
chart.addSeries({
data: additionalData[this.index].slice()
});
} else {
chart.series[1].setData(
additionalData[this.index].slice()
);
}
}
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/ufa2ygvm/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/class-reference/Highcharts.Series#setData
Related
I want to use Accessible line chart of Highcharts (https://www.highcharts.com/demo/accessible-line)
In demo, I saw some series label position on last point, some in middle and first point.
How can I set all series label on last point?
Sorry for my bad English!
You can use data labels instead of series labels.
Example:
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.point.index === this.series.points.length - 1) {
return this.series.name;
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/9ps2ckhr/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.dataLabels
In this Highcharts column chart the user can drill down by clicking on the column.
This works fine, however all the data, including the data of the drilled column, needs to be available when the chart is firstly created.
What I need is to capture the drilldown event click and populate the chart with that information, sending the data only when the user clicked on a specific column. Is this possible?
Yes, it is possible and simple. You need to use drilldown event callback function, call API request in it and use addSeriesAsDrilldown method - as in the example below:
chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e9m74kgp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown
I have created my own master-detail chart following the Highcharts docs and this example: https://www.highcharts.com/demo/dynamic-master-detail
Eveything works fine but I would like to add a feature: When the chart is loaded the last 50 data points should automatically be selected in the master chart and thus shown in the detail chart.
I tried to manually trigger the selection event but it did not work out. Any idea how to solve this?
You can fire selection event in chart load event and set correct extremes:
chart: {
...
events: {
load: function() {
var points = this.series[0].points,
xAxis = this.xAxis[0];
Highcharts.fireEvent(this, 'selection', {
xAxis: [{
min: points[points.length - 51].x,
max: points[points.length - 1].x
}],
});
},
selection: function(event) {
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/xy8qug9h/
API: https://api.highcharts.com/highcharts/chart.events.load
I want to draw a line on a ohlc chart, but i dont want the new series to introduce gaps.
The first series (ohlc) should still place the candles in an nica way with constant gaps between them regardles of open-close times (i think its only the "ordinal" value that does this, but unfortunatelly you cant specify it at series level, but only axis level).
xAxis: {
ordinal: true
},
example:
http://jsfiddle.net/5r97owky/8/
Thank you for any help
The gaps are caused by ordinal option. You can create additional xAxis for line series:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var xAxes = this.xAxis,
extremes = xAxes[0].getExtremes();
xAxes[1].setExtremes(extremes.min, extremes.max, true, false);
}
}
},
xAxis: [{}, {
visible: false
}],
...
});
Live demo: http://jsfiddle.net/BlackLabel/1mbo2zp4/
API: https://api.highcharts.com/highstock/xAxis.ordinal
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).