Is there a way to make the panning functionality to pan on future dated xAxis?
$(function () {
$('#container').highcharts('StockChart', {
xAxis: {
events: {
afterSetExtremes: function (e) {
}
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
Please refer to this test file I created http://jsfiddle.net/bxg57pav/
Appreciate your help.
Related
When I resize the navigator on the bottom from left and right the mouse over tooltip stops working, but it works fine when zoom is set to YTD or ALL, how can I fix this please? Thank you!
https://jsfiddle.net/BlackLabel/anp4L9do/1
series: [{
type: 'spline',
name: 'Price',
point: {
events: {
mouseOver: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].points[point.index].setState('hover');
},
mouseOut: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].points[point.index].setState('normal');
},
},
},
states: {
inactive: {
opacity: 1
}
},
data: [
[1541514600000, 20100.92],
[1543847400000, 18428.466]
]
}, {
type: 'column',
name: 'Volume',
data: [
[1541514600000, 31882900],
[1543847400000, 40802500]
],
states: {
inactive: {
opacity: 1
}
},
enableMouseTracking: false,
yAxis: 1
}]
});
An array with points is reduced to only the visible ones, use data array instead:
point: {
events: {
mouseOver: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].data[point.index].setState('hover');
},
mouseOut: function(e) {
var point = this,
chart = point.series.chart;
chart.series[1].data[point.index].setState('normal');
},
},
}
Live demo: https://jsfiddle.net/BlackLabel/gnkjf8q9/
I'm trying to localize a HighStock Chart: https://api.highcharts.com/highcharts/lang
However, It ignores the localization for week days:
Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
// Create the chart
Highcharts.stockChart('container', {
lang: {
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi','Jeudi', 'Vendredi', 'Samedi']
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
You can reproduce the problem here: https://jsfiddle.net/pcsxebgo/1/
You need to set weekdays in setOptions method:
Highcharts.setOptions({
lang: {
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
},
});
Highcharts.stockChart('container', ...);
Live demo: https://jsfiddle.net/BlackLabel/v876okxh/
API Reference: https://api.highcharts.com/highstock/lang.weekdays
I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/
How to remove this hightlighted area in highcharts?
please share your answers. thanks
This is done by disabling the navigator. See enabled. Simple example:
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
enabled: false
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
When using a stacked colomn chart and xAxis type is datetime on the yAxis a lot of dates, although dispatched only 2 dates.
http://jsfiddle.net/jBxbe/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [[1367280000000,8],[1369872000000,26349]]
}, {
name: 'Ex2',
data: [[1367280000000,19196],[1369872000000,31213]]
},]
});
});
With such a minimal amount about data, you are probably better off using a category xaxis instead of datetime. This will give you better control on the display.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apr 2013','May 2013']
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [8,26349]
}, {
name: 'Ex2',
data: [19196,31213]
},]
});
});
Fiddle here.
You can use pointRange parameter http://api.highcharts.com/highcharts#plotOptions.column.pointRange / tickInterval (http://api.highcharts.com/highcharts#xAxis.tickInterval) two categories http://api.highcharts.com/highcharts#xAxis.categories