Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show color thresholds in c3.js gauge

I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.

Any one can help me?

This is the gauge now:

Gauge Now

This is what I expect:

Wished gauge

like image 966
user1948455 Avatar asked May 12 '15 06:05

user1948455


1 Answers

There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:

onrendered: function() {
    drawThresholds(this, thresholdOpts, opts);
}

Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/

Output obtained looks like below:

enter image description here

and:

enter image description here

like image 171
beaver Avatar answered Oct 22 '22 23:10

beaver