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
Related
I need to set my rangeSelectors Date to this format dd/mm/yy.
The inputDateFormat works well, but you can see when you click to edit the date it changes from dd/mm/yy to mm/dd/yy. (from 27/09/21 to 09/27/21)
Somebody could help me with it please ?
Thank you
https://jsfiddle.net/igrasso/fyrj8n5d/1/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function (data) {
// Create the chart
Highcharts.stockChart('container', {
rangeSelector: {
inputDateFormat: '%d/%m/%y',
inputEditDateFormat: '%d/%m/%y',
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
This is a sample workaround of these problems. Whenever I put it on a single date range it does not reflect on the chart but when you hover or click it it's there.
Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-c.json',
function (data) {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data.slice(0,1),
tooltip: {
valueDecimals: 2
}
}]
});
});
Markers by default are disabled for normal state in Highstock. You can easily turn them on:
series: [{
...,
marker: {
enabled: true
}
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4929/
API Reference: https://api.highcharts.com/highstock/series.line.marker.enabled
I want to use a button to make the candlestick visible by day, week, and month, but I want the moving average line to not change automatically (only the day moving average line).
_chart = new Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
type: 'ohlc',
id: 'aapl',
name: 'AAPL Stock Price',
data: data
}, {
type: 'sma',
linkedTo: 'aapl'
}, {
type: 'sma',
linkedTo: 'aapl',
params: {
period: 50
}
}]
});
});
change(function() {
var unit = $(this).val();
console.log(123123);
_chart.series.forEach(function(ser) {
ser.update({
dataGrouping: {
units: [ [unit, [1]] ]
}
}, false);
});
console.log(unit);
_chart.redraw(unit);
console.log(_chart);
});
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.
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