CODEWITHSUNDEEP
reactjspie-chart
jobaer sourav
jobaer sourav

Reputation: 87

How to dynamically insert data into "react-minimal-pie-chart"

I am using react-minimal-pie-chart to show a pie chart on my website. I can easily show the pie chart with a static value. But i want to insert data dynamically into the pie chart from my json data. I call the rest api from the backend, and get the json value. Here is my code for the pie chart:

import ReactMinimalPieChart from 'react-minimal-pie-chart';

    <ReactMinimalPieChart

    data={[
    {
    title: 'One',
    value: 100,
    color: '#E38627'
    },
    {
    title: 'Two',
    value: 150,
    color: '#C13C37'
    },
    {
    title: 'Three',
    value: 10,
    color: '#6A2135'
    }
    ]}
    lineWidth={15}
    style={{height: '170px'}}
    />

My rest api for json value:

<div>
     {
     this.state.leadSourceList.map((lead, key) =>
        {lead.lead_source}
        {lead.count}
    )}
</div>

getting json values

 {count: 3, lead_source: "jobaer"} 
 {count: 2, lead_source: "web"} 
 {count: 1, lead_source: "sourav"} 
 {count: 2, lead_source: "Hop Freeman"}

I want to insert this data into the pie chart. I searched google, but I didn't get any convenient answer. Any help regarding this would be appreciated or if there is any alternative way to insert a value into pie chart or using alternative pie chart, please inform me.

this circle comes, but color is same for all

Upvotes: 1

Views: 1468

Answers (1)

Patrick Connors
Patrick Connors

Reputation: 6065

Two simple steps.

First, map over this.state.leadSourceList so that each item is converted to the following format:

{ title: 'lead_source', value: count, color: '{foo_color}'}

like so:

const pieData = this.state.leadSourceList.map((lead, key) => {
    return { 'title': lead.lead_source, 'value': lead.count, 'color': '{foo_color}'};
})

Then, create your chart as follows:

<ReactMinimalPieChart data={pieData}/>

Upvotes: 2

Related Questions