highcharts solid gauge: bigger tick marks - css

Question

I am making a solid gauge with highcharts. I am trying to make the ticks long enough to span both data series. The goal is for a white line to cut through the colored bands at 10, 6, 2.9, and 0%. Notice how at 2.9%, the tick doesn't go all the way through (even though the length is set to 100).
I have tried yAxis.tickLength to make the ticks longer, to no avail. I also tried yAxis.tickPosition: 'inside'. That doesn't solve it either. Here is my JSFiddle.
http://jsfiddle.net/ncernek/wy6bo63p/2/
Thank you for your help.

Answer 1

If you add dummy second pane and yAxis, then ticks will be both inside and outside - because in fact there will be 2 ticks looking like one.
Example: http://jsfiddle.net/Lcz6juea/
And if I get wrong index of ticks (over series) then you could use this code without zIndex set for axes: http://jsfiddle.net/Lcz6juea/1/
$(function() {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.setOptions({
chart: {
backgroundColor: 'white'
},
colors: ['#FE670A', '#0277a0', 'white']
});
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Discepant Reads',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold; text-align: center">{point.y}%</span>',
positioner: function(labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: [{
startAngle: -140,
endAngle: 140,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}]
}, {
startAngle: -140,
endAngle: 140,
size: '95%',
background: []
}],
yAxis: [{
reversed: true,
min: 0,
max: 10,
lineWidth: 0,
tickLength: 100,
tickWidth: 4,
tickColor: 'white',
tickPosition: 'outside',
minorTickLength: 0,
tickPositions: [0, 2.9, 6, 10],
zIndex: 4,
labels: {
distance: 30,
enabled: true,
x: 0,
y: 0,
format: '{value} %',
style: {
fontSize: 16
}
}
}, {
pane: 1,
linkedTo: 0,
reversed: true,
min: 0,
max: 10,
lineWidth: 0,
tickLength: 100,
tickWidth: 4,
tickColor: 'white',
tickPosition: 'inside',
minorTickLength: 0,
tickPositions: [0, 2.9, 6, 10],
zIndex: 4,
labels: {
enabled: false
}
}],
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Your Score',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 4
}],
dataLabels: {
borderRadius: 0,
backgroundColor: "#fff",
borderWidth: 0,
borderColor: "#FFF",
style: {
fontSize: "50px"
},
color: "grey",
crop: true,
formatter: function() {
var s;
s = '<span style="font-size: 50px;">' + this.point.y + '</span>';
return s;
},
y: -30,
zIndex: 90
}
}, {
name: 'Department Average',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 6
}]
}, {
name: '',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

Answer 2

Using JavaScript
Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (prev, x, y, tickLength, tickWidth, horiz, renderer) {
return renderer.rect(x, y, 2, 80, 0)
.attr({
'stroke-width': 2,
stroke: 'white',
zIndex: 4,
style: 'transform: rotateZ(45deg) translateY(-290px)'
}).add();
});
You'd have to figure out a way to override each tick, but it's doable.
--
Using CSS
The (almost) pure CSS way is to target the exact SVG path and apply a transform to it. By no means is this way ideal, but it does provide a way to get the job done.
.highcharts-axis path:nth-child(2) {
transform: scale3d(1.6, 1, 1) rotateY(-59.7deg) translate(0, 25px);
stroke-width: 2;
}
.highcharts-axis path:nth-child(3) {
transform: scale3d(3.9, 1, 1) rotateY(-70deg) translate(0, 56px);
stroke-width: 2;
}
You would also have to adjust the zIndex attribute of the yAxis so that the redrawn ticks are on top of the other paths:
yAxis: {
...
zIndex: 4
}