I want to make border dashed, but solution for pie chart doesn't work.
For some reason graph property is undefined for solidgauge charts. May be dashed style could be set by pane.background property somehow.
https://jsfiddle.net/om2enjkq/27/
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
events: {
load: function() {
this.series[0].graph.attr({
dashstyle: "LongDash"
});
},
},
},
pane: {
startAngle: -90,
endAngle: 90,
background: [{
outerRadius: '90%',
innerRadius: '60%',
backgroundColor: "white",
borderWidth: 1,
shape: "arc",
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
stickyTracking: false,
}
},
series: [{
data: [{
radius: '90%',
innerRadius: '60%',
y: 0
}],
}]
});
<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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
In this case you can grab pane element and add the stroke-dasharray
attribute to it:
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
events: {
load: function() {
this.pane[0].group.attr({
"stroke-dasharray": "15"
});
},
},
},
pane: {
startAngle: -90,
endAngle: 90,
background: [{
outerRadius: '90%',
innerRadius: '60%',
backgroundColor: "white",
borderWidth: 1,
shape: "arc",
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
stickyTracking: false,
}
},
series: [{
data: [{
radius: '90%',
innerRadius: '60%',
y: 0
}],
}]
});
<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"></div>