Total inside donut (pie variation)

[taschetto]

Greetings! Congratulations for this wonderful library.

Is it possible to render something inside a donut chart (pie variation)? Something like this:

If so, any ideas on how to achive something like this?

Thanks in advance.

[Eric0201]

i have same question too

[plouc]

Not now, but it will be available soon, using layers, a feature already implemented on other components which allow to add extra layers (or re-order existing ones).

[Eric0201]

Not now, but it will be available soon, using layers, a feature already implemented on other components which allow to add extra layers (or re-order existing ones).

how to add text to center pie chart? Any way to solve it? Thanks

[plouc]

@Eric0201 using an extra layer when it's available :)

[plouc]

Otherwise you can wrap you chart inside a div and add an extra div using an higher z-index on top of the chart, but don't forget to disable events for that div though, using pointer-events: none; in order to have the tooltip working.

[plouc]

I've created an example of this approach, you can put whatever you want inside the extra div => https://codesandbox.io/s/w27xwy0xlk

[Eric0201]

I've created an example of this approach, you can put whatever you want inside the extra div => https://codesandbox.io/s/w27xwy0xlk

thanks you very much

[kaeland]

@plouc Hi, this is an excellent library. Thank you for all the work you've put into making this!

Is the layered approach, mentioned above, ready for use with pie charts?

[thisizkp]

@kaeland I don't think it supports layers yet - https://github.com/plouc/nivo/blob/master/packages/pie/src/Pie.js#L36

[wyze]

@kaeland The Pie chart doesn't support layers yet.

Edit: I hadn't refreshed the page and it didn't show your reply @thisizkp, thanks for pointing to the source!

[kaeland]

Got it. Thank you all for such fast replies too!

[thisizkp]

@plouc @wyze How do we make the total render within the SVG? Is it possible now? Or do we have to wait until the layers are implemented?

[wyze]

Currently you would need to absolute position a div, or other element, in the middle of the chart. We haven't migrated pie chart to layers yet.

[climbingcode]

Is there a timeline available for layers in pie charts release?

[wyze]

It is available in the latest version. Here is a storybook example: https://nivo.rocks/storybook/?path=/story/pie--adding-a-metric-in-the-center-using-a-custom-layer

[piehouserat]

is it possible to do the same with the ResponsivePieCanvas component?

[silvercondor]

using the storybook example but unable to change the text color

const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
        let total = 0
        dataWithArc.forEach(datum => {
            total += datum.value
        })

        return (
            <text
                x={centerX}
                y={centerY}
                textAnchor="middle"
                dominantBaseline="central"
                style={{
                    color:"#FFFFFF",
                    fontSize: '24px',
                }}
            >
                {total}
            </text>
        )
    }

still shows as black color but fontsize adjustment works

[silvercondor]

using the storybook example but unable to change the text color

const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
        let total = 0
        dataWithArc.forEach(datum => {
            total += datum.value
        })

        return (
            <text
                x={centerX}
                y={centerY}
                textAnchor="middle"
                dominantBaseline="central"
                style={{color:'#FFFFFF',
                    fontSize: '24px',
                }}
            >
                {total}
            </text>
        )
    }

still shows as black color but fontsize adjustment works

Answering my own question in case anyone ends up in the same situation as me

The color should be under fill prop.

Final answer

const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
        let total = 0
        dataWithArc.forEach(datum => {
            total += datum.value
        })

        return (
            <text
                x={centerX}
                y={centerY}
                textAnchor="middle"
                dominantBaseline="central"
                fill='white'
                style={{
                    fontSize: '24px',
                }}
            >
                {total}
            </text>
        )
    }