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
- How To Show Tooltip In Sparkline Chart From Code
- Highcharts-ng Size does fill div until Inspect Element
- Can't disconnect line chart with [null,null] and irregular intervals in Highcharts
- Parse an array in js
- Highcharts - top justify instead of center entire chart
- Highcharts live data, json ajax
- Stacked column highcharts change x and y
- Highcharts - Trying to get a dyamic spline to update from left to right
- How can i configure this milestone in HighStock
- console error when changing line color in a HighCharts scatterplot
- Highchairs how to prepend HTML to legend
- Highcharts bar and line issue
- How to add php data into highchart js file in php
- Hide yaxis with legend
- Html not rendering chart
- highcharts - how to controle slice pie from bottom
- How to change the background color of measure tool in stock chart in highstock?
- Highchart marker clickable disable and enable condition base?
- dynamically creating the values for high charts
- How to remove Empty space above the chart
- Highcharts assign label to to x-axis max value
- Make the chart display current year in HighChart
- Disable Plotpoint legend on hover in Highcharts
- highchart 3d column - show "beta axis title" and "beta axis label"
- highcharts x-axis not showing with series of just one value
- How can I take a backingbean GSON string to Highcharts
- Group by month to plot on R with Highcharter
- Why does Highcharts div/chart extend past parent div?
- Nested json in Highcharts Stacked
- Highcharts X-Axis Alignment