score:1
Accepted answer
You can show each series in navigator by setting series.line.showInNavigator = true
. To set it dynamically use series.update()
method where you can pass new options for series.
Code:
let dates = [1496268000000, 1504216800000, 1512082800000, 1519858800000, 1527804000000, 1535752800000, 1543618800000, 1551394800000, 1559340000000, 1567288800000];
let aSerie = dates.map((e, i) => [e, i < 5 ? null : i]);
let bSerie = dates.map((e, i) => [e, i + 1]);
let cSerie = dates.map((e, i) => [e, i * 2]);
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
const chart = this;
setTimeout(() => {
chart.series[1].update({
showInNavigator: false
});
}, 2000);
}
}
},
rangeSelector: {
verticalAlign: 'top'
},
series: [{
name: "aSerie",
showInNavigator: true,
data: aSerie
}, {
name: "bSerie",
showInNavigator: true,
data: bSerie
}, {
name: "cSerie",
showInNavigator: true,
data: cSerie
}]
});
Demo:
API reference:
Source: stackoverflow.com
Related Query
- Decide which serie goes into range-selector highstock
- Highstock setExtremes with a custom range selector button
- Custom YTD Option in HighStock Range Selector
- Don't disable "all" button in range selector in Highstock
- Highstock Change tick interval on range selector change
- Highstock How to remove the cross icon in Range selector text box in IE
- HighStock Print Setting To Hide Range Selector
- Add initial and final date to Range Selector Highstock
- Adding a custom drop down to highstock range selector menu
- Strange character in the Highstock source code
- Highstock padding/margin with range selector
- Highstock Range Selector Buttons to PDF Export Dropdown
- Range Selector date always goes to 1970-01-01 in Highcharts.Chart()
- Step line in range selector with Highstock
- Highstock - Tooltip doesn't work correctly with Range Selector
- Highstock, how to offset all Y data from a serie on clicking range selector buttons
- Highstock Change date format dynamically on clicking range selector button
- Highchart flags goes out when range selector is set to entire size
- Highstock Trigger javascript when range selector button clicked
- Highstock table data: navigable with the range selector and the navigator - scrollbar
- How to disable range selector from highstocks charts
- Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)
- Adjust Highcharts data grouping based on range selector
- Can a Highcharts range selector use non-date linear ranges?
- Highstock range approximation on spline series
- Range selector input fields can't edit after hide() show()
- Get the currently selected range from RangeSelector in Highstock
- highcharts display in my render html page which i want to convert into PDF using wkhtmltopdf in rails
- How do I prevent Highstock right range handle keep slipping off the max value when adding data
- highstock -- navigator time range does not update after adding/removing series
More Query from same tag
- When I use Drilldown(Highcharts), My build --prod becomes very large in angular 8
- How to make visible atleast one line inside line chart even though the custom legend clicked to make invisible it
- How do I catch a click event on a polygon in HighCharts without having the tooltip popping up
- Define and apply theme on highcharts-react-official
- How to slow down Highcharts plot
- How to update the HighCharts title using drill-up when there are multiple charts on same page?
- Unable to change default rangeSelector Highstock
- How to show only specific x-axis values on datetime axis in Highcharts
- Make Highcharts tooltip show info for closest point to the left (i.e. not change at midpoint)
- Can i show table on x-axis as like grouped categories in highcharts - But no grouping
- Highcharts missing bars when running through PhantomJS
- High Charts not working
- Update Highcharts tooltip with onchange
- Set minRange in Highcharts at week, but doesn't work
- Show X-Axis Gaps -- Highstocks
- Remove day name from highstock chart tooltip
- How can I use chart tooltip formatter in react-highcharts?
- Which one is better to represent an API fetched data in react js and please explain how to do that?
- Display space in chart in case of null value present in object in high chart stacked bar chart
- HIghcharts Legend Symbol Getting out of graph Canvas
- Unable to display x-axis labels on multi-column mysql array in Highcharts
- How to add image/icon to a chart in Highcharts
- Highchart: Irrelevent YAxis Scale at the end
- rangeSelector doesn't show up
- Boost Enable/Disabled with update Method in Highcharts
- Highmaps - Change to mapbubble
- Dynamic xAxis Highcharts
- Highcharts live chart shifts continuously
- Export multiple series from highcharts into CSV
- How to disable label from Highchart