In Highcharts, I want to create a bullet chart. But I want the target line to be dashed. I don't see such an option in the target API. Link to target API: https://api.highcharts.com/highcharts/series.bullet.targetOptions
Is there are some workarounds to achieve that?
Example of bullet chart for docs: https://jsfiddle.net/api/post/library/pure/
Highcharts.setOptions({
chart: {
type: 'bullet'
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container', {
series: [{
data: [{
y: 275,
target: 250
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.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>
And I want the target line to be dashed.
This is how I want it to look like:
Thanks in advance
The target graphic is a rect
SVG element, so it's not possible to set dashstyle
attribute on it. As a solution, you can render an additional path
element which will partially cover the default target.
For example:
(function(H) {
H.wrap(H.Series.types.bullet.prototype, 'drawPoints', function(proceed) {
const chart = this.chart;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
this.points.forEach(point => {
const target = point.targetGraphic;
const bbox = target.getBBox();
chart.renderer.path([
'M', bbox.x, bbox.y + bbox.height / 2,
'L', bbox.x + bbox.width, bbox.y + bbox.height / 2
])
.attr({
'stroke-width': 3,
stroke: '#000',
dashstyle: 'dash'
})
.add(target.parentGroup)
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/d2hqr1jn/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts