I have a chart which ultimately I'd like to apply timezone offsets to from a dropdown list of timezones. The incoming times from json will all be UTC.
Is there a way to let highcharts handle the offset with the global timezoneOffset property, something along the lines of this when a button is clicked or dropdown selected:
Highcharts.setOptions({
global : {
timezoneOffset : 300
}
});
Maybe I also need to redraw the chart after doing this?
Example here: https://plnkr.co/edit/oqOAmUnH2LZzAX3a7vpV
The global.timezoneOffset option is deprecated so I suggest using time.timezoneOffset instead for a chart. With the chart-sentric option you can do a normal chart update to set a new timezoneOffset.
For example (JSFiddle demo):
let chart = Highcharts.chart('container', {
time: {
timezoneOffset: -120
}
// ...
});
And upon doing a dropdown selection:
chart.update({
time: {
timezoneOffset: 0
}
});
Related
In range-selector, I have many options to select from (in reality) and in given demo, I initially load last 2 hours data.
In this scenario, last 1 hour option is enabled but other options are disabled.
I really don't know what is wrong. The requirement is to load last 2 hour data first and then from dropdown, you can select other options (eg. last 6 hours) and accordingly data will be loaded.
How to enable other options in range-selector ?
I tried setting
minRange:1
but I have no clue how to fix it.
DEMO : https://stackblitz.com/edit/js-2eyktg?file=index.js,chartOptions.js,mock-data%2Fi.js
Updates:
I tried using
allButtonsEnabled: true,
It enables all options but when I click on 3 hours, 6 hours options, it doesn't make any BE call. I believed that it should automatically call afterSetExtremes functions with min & max value, fetch data from BE and update the chart but it doesn't happen.
DEMO : https://stackblitz.com/edit/js-jsxchg?file=index.js,chartOptions.js,backend.js
You can:
a) Set min property for an x-axis in a navigator:
navigator: {
xAxis: {
min: currentTimestamp - 6 * 60 * 60 * 1000, // 6 hours
},
// adaptToUpdatedData: false,
...
}
Live example: https://stackblitz.com/edit/js-m38td3?file=index.js
API Reference: https://api.highcharts.com/highstock/navigator.xAxis
b) Enable rangeSelector.allButtonsEnabled property and use afterBtnClick Highcharts event. The event afterSetExtremes is not called if the extremes are the same as the current one (they are because of initial min and max restriction).
chart: {
zoomType: 'x',
events: {
load: function() {
Highcharts.addEvent(
this.rangeSelector,
'afterBtnClick',
function() {
const button = this.buttonOptions[this.selected];
const chart = this.chart;
afterSetExtremes({
target: {
chart
},
min: chart.xAxis[0].dataMax - button._range,
max: chart.xAxis[0].dataMax
});
});
}
}
}
Live demo: https://stackblitz.com/edit/js-tuzuuz?file=chartOptions.js,index.js,index.html
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
In the example I added a column chart with range selector. I changed the chartType of range selector to ColumnChart. But its not changing to column chart. can some one help on this.
Also is there is any way to customize the design of the range selector as in this image.
valid chart types for the ChartRangeFilter are...
ui.chartType = 'AreaChart', 'LineChart', 'ComboChart' or 'ScatterChart'
in this case, use...
'ComboChart'
then set chart option...
ui.chartOptions.seriesType = 'bars'
e.g.
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ComboChart',
chartOptions: {
seriesType: 'bars'
}
}
}
});
I am using highcharts drilldown chart with multiple levels and I would like to show the users what path they have traversed while drilling down the chart. Is there a way to show that path next to the chart?
for example https://jsfiddle.net/crxmkgaz/
in this fiddle if I click on Chrome and then on v63.0 the path should show like chrome -> v63.0, and should update if the user drill up.
ps: I am using react.
Thanks in advance.
You can use drilldown and drillup events to add information about drilldown level, for example in this way:
chart: {
type: 'pie',
events: {
drilldown: function(e) {
var newEl = document.createElement('span');
newEl.innerText = ' --> ' + e.seriesOptions.name
path.appendChild(newEl);
},
drillup: function() {
path.children[path.children.length - 1].remove();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/8mLhy31p/
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup
I am trying to build a stacked bar chart with navigator using highchart which do not have a date range in x-Axis.
Navigator is working fine when clicked or dragged. When clicked on left of navigator graph shows -1 value. Does anyone have any idea?
I tried below logic : https://codepen.io/yugshah0106/pen/OeWpQq
This issue occurs because you're using navigator with Highcharts instead of Highstock. When you swap a Highcharts.chart constructor with Highcharts.stockChart then the navigator will be created properly.
Note, that to have categories as you did before, in Highstock the xAxis.labels.formatter callback has to be used and return proper values:
xAxis: {
labels: {
formatter: function(value) {
return Vlans[this.value];
}
},
tickInterval: 1
}
Demo:
https://jsfiddle.net/BlackLabel/p8o1ytw7/2/
Now legend in EXTJS works in such way: it shows all available legend fields and appropriate series and you can enable/disable any of them. I want to make that only one legend item can be enabled in one time. E.g. you have chart with 2 legend items (with 2 series), only first item is active on chart load and then if you want to active second item then first item becomes automatically disabled.
Here is chart fiddle with native ExtJS behaviour:
https://fiddle.sencha.com/#fiddle/1b7d
Please, post ideas how can I make it work as I described before.
If you have a look at the legend source code, freely available in your Ext directory or in the Sencha docs, you find that you can override that toggleItem method in such a way that only one selection is allowed.
The basics should be something like
toggleItem: function (index) {
var store = this.getStore(),
record = store.getAt(index);
store.query("disabled", false).each(function(record) {record.set("disabled", true) });
record.set("disabled", false);
}
but it doesn't work exactly as expected. Perhaps you can pave your way along from there.
this can be easily achieved with using legend type dom, and looping and setting every other legend (button) disabled, as followed -
legend: {
docked: 'bottom',
type: 'dom',
listeners: {
itemclick: function(obj, record, item, index) {
var i = 0,
records = obj.getStore().getRange();
for(i=0; i < records.length; i++){
i === index ? records[i].set('disabled', false) : records[i].set('disabled', true);
}
}
}
}