Gauge chart to combine colors in same arc

[Tony Fecteau]

Hi there, I am using the C3 Gauge chart, and I need to see if I can accomplish a type of gauge that allows me to display thresholds, and then show the current value.

The new C3 Gauge control (0.4.21) does not overlap colors at all, it creates a new arc for each data column, which is very nice, but not what I need.

I need to create a gauge which shows red, yellow and green bands, then I can draw a needle pointing to the current value.

Visually, you will be able to see what color zone you are in very quickly.

Is this possible with the current Gauge?  Is there something else I can do?

[Tony Fecteau]

I have made a new React component using simple arc's and shapes.

It seems to do the job for now unless someone has a better component to use....

[sridha...@gmail.com]

>hi it can be done by using semi donut chart in c3 and chart js also but i implemented in chart js

[Vijay Ramesh]

No this isnt help.  But i have made.  I got to know by using data index we can do.

Function(Colors, d)

return colors [d.index]

On Sat, Jul 21, 2018 at 12:00 AM, <kuku....@gmail.com> wrote:

There is a work around for this. You can specify 2 values in columns section and assign them different colors.  Not sure if it is the right way but get the job done. Here is the code..



var chart = c3.generate({
bindto: '#donut-chart',
 size:{
        height:180,
},
data: {
 columns: [
        ['Value 1', 8],
         ['Value 2', 2],
],
type : 'gauge',                                             
  },
gauge: {
label: {
         format: function(value, ratio) {
        return value;
         },
                                                    show: true // to turn off the min/max labels.
                                                        },
                                                    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
                                                    max: 10,
                                                    width: 39 // for adjusting arc thickness
                                                    },
                                                    color: {
                                                    pattern: ['#00914F','#FFCC33','#D80000' ], // the three color levels for the percentage values.
                                                    threshold: {
                                                        values: [4,7,10]
                                                    }
                                                },

                                                });
                                       

--
You received this message because you are subscribed to the Google Groups "c3js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to c3js+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/c3js/d9b6f688-aeba-420c-9122-ec52d810d294%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.