show text in the middle

[luisrudge]

can we add an api to insert text inside ProgressBar.Circle?
I mean, I wan't to add the percentage inside of it without having to rely on external html+css.
Thanks!

[kimmobrunfeldt]

This would be a nice addition. I haven't yet added it because I wanted to delegate all CSS to the user. I have to investigate if SVG text could be a way to go.

This would also introduce setLabel or setText method to dynamically modify the text.

[luisrudge]

Yeah. I'd love that!

[kimmobrunfeldt]

I'll try to work with this in the near few weeks

[kimmobrunfeldt]

Since SVG text can't be vertically centered in IE9(http://stackoverflow.com/questions/5510432/how-to-center-svg-text-vertically-in-ie9), this should be done with adding additional stuff in the container. Something like this:

<div class="progressbar-container">
    <svg viewBox="0 0 100 1" preserveAspectRatio="none"><path d="M 0,0.5 L 100,0.5" stroke="#FCB03C" stroke-width="1" fill-opacity="0" style="stroke-dasharray: 100px, 100px; stroke-dashoffset: 0px;"></path></svg>

    <p>Text</p>
</div>

With this approach, the container must have position: relative.

Also, the text attribute is only sensible for Circle and Square shapes

[davidcpell]

+1 to this!

[kimmobrunfeldt]

I'm currently working on this #38

[kimmobrunfeldt]

There's now support for text. I released 0.7.0.
Example here: http://kimmobrunfeldt.github.io/progressbar.js/#example-circle-percent

Documentation: https://github.com/kimmobrunfeldt/progressbar.js/tree/0.7.0#shapecontainer-options

Quote from docs:

   // Text options. Text element is a <p> element appended to container
    // You can add CSS rules for the text element with the className
    // NOTE: When text is set, 'position: relative' will be set to the
    // container for centering. You can also prevent all style modifications
    // with 'autoStyle: false'
    // Default: null
    text: {
        // Initial value for text.
        // Default: null
        value: 'Text',

        // Text color.
        // Default: same as stroke color (options.color)
        color: '#f00',

        // Class name for text element.
        // Default: 'progressbar-text'
        className: 'progressbar__label',

        // If true, CSS is automatically set for container and text element.
        // If you want to modify all CSS your self, set this to false
        // Default: true
        autoStyle: true
    },