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

Segmenting a solid gauge

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 1150 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Segmenting a solid gauge

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!
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Segmenting a solid gauge

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 1113 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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Segmenting a solid gauge

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
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Segmenting a solid gauge

Hi, Can you give an example of what you mean by colour stops
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Segmenting a solid gauge

Hello djoshi,

In the demo that I have shared (https://jsfiddle.net/BlackLabel/7v6gpoc9/) you can find stops property on Y axis, which allows you to define series color for different values.

Code: Select all

stops: [
           [0.3, '#55BF3B'], // green
           [0.6, '#DDDF0D'], // yellow
           [1, '#ed1f1f'] // red
         ],
More about that property you can read here: https://api.highcharts.com/highcharts/yAxis.stops

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”