Morris.js甜甜圈标签

Question

I'm having an extremely frustrating time trying to move the data text labels from this donut chart to be outside of the center. http://jsbin.com/ukaxod/144/embed?javascript,live the xpos and ypos are generated dynamically, and I can't seem to overwrite them with CSS and I can't find what is setting them in JS. A little help would be very appreciated. thanks

Answer 1

The label in the center is placed there by design and cannot be simply changed.

If you look at the source code you can find these lines:

Donut.prototype.redraw = function() {
    // ...
    cx = this.el.width() / 2;
    cy = this.el.height() / 2;
    // ...
    this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, this.options.labelColor, 15, 800);
    this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, this.options.labelColor, 14);
    // ...
}

It calculates cx/cy so that they point to the center of the chart, and generates 2 labels (for text and value). You can change the source code, or you can try to find the corresponding text tag in the svg code and change its x and y properties.