djoshi
Posts: 13
Joined: Fri Mar 26, 2021 5:16 pm

Segmenting a solid gauge

Tue Sep 14, 2021 9:34 pm

Hi All

I am using a using a solid gauge,

Is it possible using css or from properties of the gauge that it can be segmented into 3 parts and each part have its own colour.

I have attached an image of what i am trying to do.
guage.jpg
guage.jpg (27.28 KiB) Viewed 248 times

mateusz.b
Posts: 311
Joined: Tue Jul 13, 2021 11:34 am

Re: Segmenting a solid gauge

Wed Sep 15, 2021 11:20 am

Hello djoshi,

Thanks for contacting us with your question.

I've tried to create something similar, here is the demo: https://jsfiddle.net/BlackLabel/yq0o7ju4/

The colors doesn't work yet, because I need you to clarify how would you like to color these bars. When value, for example, reach third bar, each bar should have different color, or they should have the same color, but different than lower values? Some ilustrations would be greatly appreciated.

Best regards!

djoshi
Posts: 13
Joined: Fri Mar 26, 2021 5:16 pm

Re: Segmenting a solid gauge

Wed Sep 15, 2021 5:47 pm

Thank you for your reply.

I am using HightChart stock and i am not sure if it works slightly different, but i am not able to get the rounded edge on end part of the plot, it seems to only work on the starting as shown in attached image.
guage_s.jpg
guage_s.jpg (11.23 KiB) Viewed 211 times
Each third bar should have its own colours, e..g green , orange and red

This is how i have adapted the code to get my gauge working at my side.

Code: Select all

  this.chart = this.maingauge_chart.stockChart('MainGuageA', {
      chart: {
        type: 'solidgauge',
        backgroundColor: 'transparent',
      },
      credits: {
        enabled: false
      },

      pane: {
        center: ['50%', '50%'],
        size: '100%',
        innerSize: '10%',
        startAngle: -150,
        endAngle: 150,
        background: {
          backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
          innerRadius: '90%',
          outerRadius: '100%',
          shape: 'arc'
        }
      },
      lineWidth: 1,
      tooltip: {
        enabled: false
      },
      navigator: {
        enabled: false
      },
      rangeSelector: {
        selected: 1,
        inputEnabled: false,
        enabled: false
      },
      scrollbar: { enabled: false },

      // the value axis
      yAxis: {
        min: 0,
        max: 100,     
        // stops: [
        //   [0.1, '#55BF3B'], // green
        //   [0.5, '#DDDF0D'], // yellow
        //   [0.8, '#ed1f1f'] // red
        // ],
        lineWidth: 0,
        tickPositions: [100 / 3, 2 / 3 * 100],
        minorTickWidth: 0,
        zIndex: 10,
        tickColor: '#deeeee',
        tickWidth: 10,
        tickLength: 50,
        offset: 20,
        labels: {
          enabled: false
        },
        title: {
          enabled: false
        }
      },
      plotOptions: {
        solidgauge: {
          innerRadius: '90%',
          dataLabels: {
            enabled: false

          },
          rounded: true,

        },
      },
      
      
      series: [{
        data: [this.gauge1_value1],
        tooltip: {
          
          enabled: false
        },        
      },       
    ],

      

    });

mateusz.b
Posts: 311
Joined: Tue Jul 13, 2021 11:34 am

Re: Segmenting a solid gauge

Fri Sep 17, 2021 3:10 pm

Hello djoshi,

There is no arc shape with rounded corners in default symbols array that is available in Highcharts.
You would have to use a custom shape or extend Highcharts to override arc symbol path.
Extending Highcharts: http://www.highcharts.com/docs/extendin ... highcharts

To request a feature, please post a suggestion on UserVoice http://highcharts.uservoice.com/forums/55896-general, or vote for the ones that are already registered.

There is alternative workaround that could be much easier to achieve. Simply add second dummy series, that will simulate pane with rounded corners.
Demo: https://jsfiddle.net/BlackLabel/7v6gpoc9/

When it comes to different color for each bar, unfortunately we don't have such option too. You could try similar approach and add overlaping series with different values and colors. It would work, but if you dont like that idea, I think you need to stick to color stops.

Best regards

Return to “Highcharts Stock”