-
vizulyOctober 20, 2017 at 7:31 am #8072
Hello,
There are a couple of ways to do what you want. But adding a newline character won’t work as these number labels are svg.text fields (which DON’T have native multi-line support)
Probably the easiest way to do this is to modify the src/viz/radialprogress.js source code and add an additional label in the update() function.
Look for the following lines of code in the update function:
var label = labelPlot.selectAll('.vz-radial_progress-label').data([scope.data]); label.enter().append('text').attr('class', 'vz-radial_progress-label').style('text-anchor', 'middle'); label.exit().remove(); label = labelPlot.selectAll('.vz-radial_progress-label'); label.attr('x', size.width / 2) .attr('y', size.height / 2) .text(function (d, i) { return scope.label(d, i) });
Then using the same d3.js enter/update/exit pattern add a second label positioned below the first one with your value in there.
I hope that helps point you in the right direction.
Cheers,
Tom
You must be logged in to reply to this topic.
© 2024 — vizuly.io