javascripthighcharts

Highcharts.js - in bullet chart, make the target line dashed


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: enter image description here

Thanks in advance


Solution

  • 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