score:1
Accepted answer
all the blue lines are created by one svg path element. the only way to change a navigator outline is to wrap the function responsible for drawing it and change its path.
for example:
(function(h) {
h.wrap(h.navigator.prototype, 'drawoutline', function(procced, zoomedmin, zoomedmax, inverted, verb) {
var navigator = this,
maskinside = navigator.navigatoroptions.maskinside,
outlinewidth = navigator.outline.strokewidth(),
halfoutline = outlinewidth / 2,
outlinecorrection = (outlinewidth % 2) / 2, // #5800
outlineheight = navigator.outlineheight,
scrollbarheight = navigator.scrollbarheight,
navigatorsize = navigator.size,
left = navigator.left - scrollbarheight,
navigatortop = navigator.top,
verticalmin,
path;
if (inverted) {
left -= halfoutline;
verticalmin = navigatortop + zoomedmax + outlinecorrection;
zoomedmax = navigatortop + zoomedmin + outlinecorrection;
path = [
'm',
left + outlineheight,
navigatortop - scrollbarheight - outlinecorrection, // top edge
'l',
left + outlineheight,
verticalmin, // top right of zoomed range
'l',
left,
verticalmin, // top left of z.r.
'l',
left,
zoomedmax, // bottom left of z.r.
'l',
left + outlineheight,
zoomedmax, // bottom right of z.r.
'l',
left + outlineheight,
navigatortop + navigatorsize + scrollbarheight // bottom edge
].concat(maskinside ? [
'm',
left + outlineheight,
verticalmin - halfoutline, // upper left of zoomed range
'l',
left + outlineheight,
zoomedmax + halfoutline // upper right of z.r.
] : []);
} else {
zoomedmin += left + scrollbarheight - outlinecorrection;
zoomedmax += left + scrollbarheight - outlinecorrection;
navigatortop += halfoutline;
path = [
'm',
zoomedmin,
navigatortop, // upper left of zoomed range
'l',
zoomedmin,
navigatortop + outlineheight, // lower left of z.r.
'l',
zoomedmax,
navigatortop + outlineheight, // lower right of z.r.
'l',
zoomedmax,
navigatortop, // upper right of z.r.
].concat(maskinside ? [
'm',
zoomedmin - halfoutline,
navigatortop, // upper left of zoomed range
'l',
zoomedmax + halfoutline,
navigatortop // upper right of z.r.
] : []);
}
navigator.outline[verb]({
d: path
});
});
}(highcharts));
live example: https://jsfiddle.net/blacklabel/lrgok19a/
useful thread: https://www.highcharts.com/forum/viewtopic.php?t=41155
Source: stackoverflow.com
Related Query
- Hide navigator's top outline outside of selection
- How to hide the context menu on clicking outside uisng JS?
- Strange character in the Highstock source code
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- Hide connection to points outside x-range in Highcharts line chart type
- How do I hide the code for the chart data in highcharts?
- HighCharts Hide Series Name from the Legend
- Hide axis and gridlines Highcharts
- how to hide highchart x - axis data values
- Hide line in default state in Highcharts
- How can I hide series from a HighCharts legend?
- Highchart - show / hide an y-Axis without hiding the series
- highcharts hide zoom reset button, call zoom reset programmatically
- How to hide labels in the highcharts in the pie
- How can I hide a series from initially being displayed in Highcharts
- How to hide zero values in Column chart
- Highcharts: Hide and show legend
- Highchart hide default buttons
- How to export a Highchart chart to PDF thanks to a button outside the chart?
- Highcharts - labels inside and outside a pie chart
- How can i hide all the Series in highcharts at a time
- How to make stacked column graph to show total data value on top
- Highcharts Show x-axis on top
- How to programatically hide a tooltip in highcharts?
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts - Legend Positioning outside the chart
- Optimize JavaScript DrillDown code
- hide zoom text on rangeSelector
- Highcharts - How to hide series name and Y value in tooltip
- Highcharts pie dataLabels inside and outside
More Query from same tag
- React / High chart / Stacked bar label for each block
- How can you set colors per level in a Highcharts Sunburst chart?
- Highchart Treemap colorindex for fixed color values
- Highcharts heatmap not rendering squares or rectangles
- Highcharts (PieChart) - chart width reduced on drawing second time
- Draw JSON result in highchart
- R programming Highchart Number format
- HghCharts drilldown module: Uncaught TypeError: Cannot read property 'lang' of undefined
- path issue of package.json during build
- Need to precisely set Highcharts axis min/max after chart creation
- Highcharts dual X axis chart not scaling axis
- can I change the color of some legend items in a wind rose chart?
- Unable to assign series to Highcharts even after the data is correctly decoded
- Why HighStocks ticks are calculated unevenly?
- Highchart draw rows at bottom of the chart align with axis
- One label for multiple series
- Not able to display highcharts in php
- Two data points on same day
- Highcharts custom SVG marker
- How can I display crosshair labels on top of the chart with Highcharts
- High Charts - Populating Data From Array
- PDF having Highcharts (multiple series) chart generated using svg2pdf.js throws error
- Highcharts not responsive for all series in chart
- Highcharts dual axis set yRange
- How can I prevent Highcharts from displaying decimal intervals in between x-axis ticks?
- Highcharts setExtremes blanking the graph
- HighCharts in AngularJS with dynamic data
- Is is possible to create a grouped bar chart in HighChartJS?
- Exporting Highchart Live Data to Table
- Highchart: Background color of Axis