Map an array as data for line chart component

Question

i want to make a reusable line chart component from a given data. Currently, i have created the line chart component, but it is still not reusable.

Here is the Line Chart component which isn't reusable. Note that the "LineGraph" is repeated from the dataKey

import {LineChart as ChartLine, Line as LineGraph, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar, ResponsiveContainer} from 'recharts'

    export class LineChart extends Component{
      render(){
        return(
          <div className="bar-chart-container">
            <large style={{margin:'30px 50px'}}>{this.props.label}</large>
            <ResponsiveContainer width='100%' height={250}>
              <ChartLine width={680} height={250} data={this.props.data}>
                <XAxis dataKey="name" />
                <YAxis />
                <CartesianGrid strokeDasharray="3 3"/>
                <Tooltip />
                <Legend iconType="circle" iconSize={8}/>
                <LineGraph type="monotone" dataKey="BSD" stroke="#f8aa27"/>
                <LineGraph type="monotone" dataKey="FSD" stroke="#94dea9"/>
                <LineGraph type="monotone" dataKey="SMS" stroke="#795548"/>
                <LineGraph type="monotone" dataKey="TDMO" stroke="#0099ff"/>
                <LineGraph type="monotone" dataKey="CEM" stroke="#642bb6"/>
              </ChartLine>
            </ResponsiveContainer>
          </div>
        )
      }
    }

The data that i use

    <LineChart
       label="SPI HISTORY"
       data={[
             { name: 'JAN', BSD: 0.3, FSD: 0.6 , SMS: 1.2 , TDMO: 1.4 , CEM: 0.8 },
             { name: 'FEB', BSD: 0.5, FSD: 0.3 , SMS: 1.1 , TDMO: 1.8 , CEM: 1.0 },
             { name: 'MAR', BSD: 0.2, FSD: 0.4 , SMS: 1.1 , TDMO: 1.7 , CEM: 1.2 },
             { name: 'APR', BSD: 0.3, FSD: 0.9 , SMS: 0.7 , TDMO: 1.4 , CEM: 1.1 },
             { name: 'MAY', BSD: 0.6, FSD: 1.0 , SMS: 0.8 , TDMO: 1.6 , CEM: 1.2 },
             { name: 'JUN', BSD: 0.4, FSD: 1.5 , SMS: 0.9 , TDMO: 0.8 , CEM: 1.1 },
             { name: 'JUL', BSD: 0.6, FSD: 1.2 , SMS: 1.5 , TDMO: 1.0 , CEM: 1.6 },
             { name: 'AUG', BSD: 0.9, FSD: 1.3 , SMS: 1.8 , TDMO: 0.3 , CEM: 1.5 },
             { name: 'SEP', BSD: 0.7, FSD: 0.9 , SMS: 1.3 , TDMO: 0.5 , CEM: 1.6 },
             { name: 'OCT', BSD: 0.8, FSD: 1.0 , SMS: 1.6 , TDMO: 1.0 , CEM: 1.4 },
             { name: 'NOV', BSD: 0.5, FSD: 0.3 , SMS: 1.7 , TDMO: 0.8 , CEM: 1.1 },
               { name: 'DEC', BSD: 0.2, FSD: 0.4 , SMS: 1.6 , TDMO: 1.5 , CEM: 1.2 }
         ]}/>

How do i make it reusable so i don't have to write each "LineGraph" for each data (BSD, FSD, SMS, TDMO , CEM) and so i can use this component if the given data is different on the LineChart Component? Thank you very much!

edit: The docs for which module i use for the line chart http://recharts.org/#/en-US/api/LineChart

You can change the given data with whatever structure you like SO post : https://stackoverflow.com/questions/45456637/map-through-an-array-to-form-a-line-graph

Welcome to the Treehouse Community

Looking to learn something new?

Riza Satyabudhi

Riza Satyabudhi

Map an array as data for line chart component