Search code examples
javascriptcsssvghighchartspie-chart

Is it possible to make dashed border of pie highchart?

I need to make default solid border of pie highchart to dashed. It's needed only for pie with no data or with negative data values. May be it's possible to redraw somehow svg of border (https://jsfiddle.net/g8vafrt5/13/): enter image description here

Highcharts.chart('container', {
   chart: {
        type: 'pie',
    },
        tooltip: {
        enabled: false
    },
   plotOptions: {
      pie: {
         dataLabels: {
            enabled: false,
         },
      },
      series: {
      showInLegend: true,
      },
    },
    series: [{
        innerSize: "40%",
        data: [{
            y: 0,
        }]
    }]
});
Solution

  • You can edit dashstyle attribute in the load event callback. For example:

      chart: {
    type: 'pie',
    events: {
      load: function() {
        this.series[0].graph.attr({
          dashstyle: 'Dash'
        });
      }
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/cqgm6nhu/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr