Search code examples
javascripthighchartsborderpie-chart

Is it possible to set dashstyle to solidgauge highchart?


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.

enter image description here

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>


Solution

  • 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>

    Demo: https://jsfiddle.net/BlackLabel/s52fguka/