Does anyone know how to programmatically update the dates in the rangeSelector?
Here is a fiddle of my chart http://jsfiddle.net/ibike365/jneQh/1/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
},function(chart){
console.log(chart.rangeSelector);
});
});
I have a use case where I need to be able to set specific start and end dates for the selected range when I load the chart, but I'm not having much luck. When I inspect the chart.rangeSelector property in the console, I don't even see what to update.
Thanks for any help!
I figured it out:
chart.xAxis[0].setExtremes(startDate.getTime(), endDate.getTime());
Related
So I built a Highcharts application which looks somewhat like this:
https://codesandbox.io/s/angular-opcho
the chart looks like this:
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
data1;
data2;
chartOptions = {
title: {
text: "Global temperature change"
},
subtitle: {
text: "Data input from CSV"
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: []
}
A highcharts application where you can upload csv data.
If you put in csv data which looks similar to this:
"runs","numbers",differences
"run1","1123",21
"run2","222",7200
"run3","31112",60
"run4","412312",32
you will have a nice graph with x and y axis.
Now, what i am trying to do is to build in a range selector for the y axis so i can sort out really high values and have a better view on the lower values.
My problem is, i can only find range selectors that have something to do with date and time. Is there any range selector for my specific problem?
The basic range selector uses setExtremes method, so you can do the same on yAxis:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [1, 2, 3, 1, 3, 999, 888, 979]
}]
});
document.getElementById('low').addEventListener('click', function() {
chart.yAxis[0].setExtremes(0, 10);
});
document.getElementById('high').addEventListener('click', function() {
chart.yAxis[0].setExtremes(850, 1000);
});
Live demo: http://jsfiddle.net/BlackLabel/hbf2smoc/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
When using Highcharts Navigator the docs mention:
Unless data is explicitly defined on navigator.series, the data is borrowed from the first series in the chart.
$(function () {
$('#container').highcharts('StockChart', {
navigator: {
series: {
lineWidth: 1
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
But as in the example of Highcharts Navigator itself here the data is not exactly the data from the first series in the chart. In this example the date is between 2007-2015 but navigator only shows 2008-2014. Is there a way to override this option? How can I change this?
In my code, I am loading many files during navigation of chart but i want to include feathure like zoomType and hover and mousever on some specific files. For example, i am changing zoomType='x' of chart by reading sample.json file.
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
$.getJSON('sample.json', function(data) {
options.series=data;
options.chart.zoomType='x'; /*including zoom feature only for sample.json file*/
var chart = new Highcharts.Chart(options);
});
But this code does not work. How can i fix this error?
See the working demo
I am setting 'x' for default series and zoomtype 'y' for next json data (when you click plus icon), see your previous code and demo at plunker link
$("#container").html("<div style='style:margin:0 auto'>Loading Data</div>") ;
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
});
We are experiencing a similar bug to the one in the jsFiddle below.
When zooming in on the chart, the shaded rectangle does not go away. I don't think the onMouseUp event is working properly in certain cases.
http://jsfiddle.net/mihailiviu/od61d2z3/
Can someone tell us what is causing this and how we can avoid it?
This is how I create the chart:
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
animation : false,
zoomType : 'xy',
events : {
redraw : function (event) {}
}
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
tooltip : {
enabled : false,
animation : false,
useHTML : true,
formatter : function () {
return false;
},
crosshairs : [true, true]
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
Take a look at this jsfiddle:
http://jsfiddle.net/P8hrN/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
yAxis: [{
lineWidth: 1,
opposite: true
}],
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
I use "opposite: true" to display the y-axis on the right. But I want also the labels (numbers) to be on the right of the axis, not inside the series area.
At the moment, the numbers are on the left, so the series touches the "450" label.
Any ideas?
You need to set align:'left', so anchor-point for label will be on a left side. See demo and docs.