CODEWITHSUNDEEP
reactjschart.js
Subburaj
Subburaj

Reputation: 2334

Pie Chart Label is not visible in ReactJS

I am trying to create a Pie Chart dashboard. Chart is getting drawn based on the value, but the legend is not getting displayed. I have tried the label as below.

Chart

Summary.js:

import React, { Component } from 'react';
import PieChart from 'react-minimal-pie-chart';


class Summary extends Component {

   render()
     {
        return(

<PieChart className="chart-style" x={50} y={60} outerRadius={100} innerRadius={50} 
  data={[
    { value: 11, color: '#E38627',label: 'New' },
    { value: 12, color: '#C13C37',label: 'Closed' },
    { value: 8, color: '#6A2135',label: 'Reopened' },
  ]}
  />    
        );
     }
  }
export default Summary;

Upvotes: 0

Views: 3614

Answers (2)

Jason Parra
Jason Parra

Reputation: 97

Adding this works for me.

label={(props) => { return props.dataEntry.title;}}

Example

    <PieChart
    label={(props) => { return props.dataEntry.title;}}
    data={[{ title: "One", value: 10, color: "#E38627" },
           { title: "Two", value: 15, color: "#C13C37" },
           { title: "Three", value: 20, color: "#6A2135" },
    ]}
    />

Its works at least for display labels, but you can customize it for showing percentage as well.

Upvotes: 3

tabris
tabris

Reputation: 67

A good way to solve it is to provide a label function 

<PieChart ... 
label={props => { return props.data[props.dataIndex].label;}}
/>

You can also just provide label={true} but then it will show te value not the label in the data array.

Upvotes: 2

Related Questions