diff --git a/htdocs/samples/chart_gauge.html b/htdocs/samples/chart_gauge.html
index a650135..2cf7d8d 100644
--- a/htdocs/samples/chart_gauge.html
+++ b/htdocs/samples/chart_gauge.html
@@ -26,6 +26,9 @@
// format: function(value, ratio) {
// return value;
// },
+// extents: function (value, isMax) {
+// return value + '%';
+// },
// show: false // 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
diff --git a/spec/arc-spec.js b/spec/arc-spec.js
index f363693..242a8fe 100644
--- a/spec/arc-spec.js
+++ b/spec/arc-spec.js
@@ -154,6 +154,43 @@ describe('c3 chart arc', function () {
// This test has bee updated to make tests pass. @TODO double-check this test is accurate.
expect(data.attr('d')).toMatch(/M-221.*?,-2\..+A221.*?,221.*? 0 1,1 -68.*?,210.*?L-65.*?,201.*?A211.*?,211.*? 0 1,0 -211.*?,-2.*?Z/);
});
+
+ it('should update labels use custom text', function() {
+ args = {
+ gauge: {
+ width: 10,
+ max: 100,
+ expand: true,
+ label: {
+ extents: function (value, isMax) {
+ if (isMax) {
+ return 'Max: ' + value + '%';
+ }
+
+ return 'Min: ' + value + '%';
+ }
+ }
+ },
+ data: {
+ columns: [
+ ['data', 8]
+ ],
+ type: 'gauge',
+ fullCircle: true,
+ startingAngle: Math.PI/2
+ }
+ };
+ expect(true).toBeTruthy();
+ });
+
+ it('should show custom min/max guage labels', function () {
+ var chartArc = d3.select('.c3-chart-arcs'),
+ min = chartArc.select('.c3-chart-arcs-gauge-min'),
+ max = chartArc.select('.c3-chart-arcs-gauge-max');
+
+ expect(min.text()).toMatch('Min: 0%');
+ expect(max.text()).toMatch('Max: 100%');
+ });
});
});
diff --git a/src/arc.js b/src/arc.js
index 5abcdde..b94baab 100644
--- a/src/arc.js
+++ b/src/arc.js
@@ -135,6 +135,13 @@ c3_chart_internal_fn.textForArcLabel = function (d) {
return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio);
};
+c3_chart_internal_fn.textForGaugeMinMax = function (value, isMax) {
+ var $$ = this,
+ format = $$.getGaugeLabelExtents();
+
+ return format ? format(value, isMax) : value;
+};
+
c3_chart_internal_fn.expandArc = function (targetIds) {
var $$ = this, interval;
@@ -234,6 +241,11 @@ c3_chart_internal_fn.getArcLabelFormat = function () {
return format;
};
+c3_chart_internal_fn.getGaugeLabelExtents = function () {
+ var $$ = this, config = $$.config;
+ return config.gauge_label_extents;
+};
+
c3_chart_internal_fn.getArcTitle = function () {
var $$ = this;
return $$.hasType('donut') ? $$.config.donut_title : "";
@@ -405,11 +417,11 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
$$.arcs.select('.' + CLASS.chartArcsGaugeMin)
.attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2))) + "px")
.attr("dy", "1.2em")
- .text(config.gauge_label_show ? config.gauge_min : '');
+ .text(config.gauge_label_show ? $$.textForGaugeMinMax(config.gauge_min, false) : '');
$$.arcs.select('.' + CLASS.chartArcsGaugeMax)
.attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2)) + "px")
.attr("dy", "1.2em")
- .text(config.gauge_label_show ? config.gauge_max : '');
+ .text(config.gauge_label_show ? $$.textForGaugeMinMax(config.gauge_max, true) : '');
}
};
c3_chart_internal_fn.initGauge = function () {
diff --git a/src/config.js b/src/config.js
index aa6e57a..c127be5 100644
--- a/src/config.js
+++ b/src/config.js
@@ -184,6 +184,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
gauge_min: 0,
gauge_max: 100,
gauge_startingAngle: -1 * Math.PI/2,
+ gauge_label_extents: undefined,
gauge_units: undefined,
gauge_width: undefined,
gauge_expand: {},