1. Home
  2. Forum
  3. React - EJ 2
  4. Refresh Chart

Refresh Chart

Hello, please I have a question:
How can we update the chart automatically when we change a parameter using  setState  .
Here is my js code:

When I select the method this.changeVisibility(1)  I change using state the parameter visible to FALSE.... but its working just when I press F5 to update the screen ....

import React, {Component} from "react";
import Button from '@material-ui/core/Button';

import {
    ChartComponent,
    SeriesCollectionDirective,
    SeriesDirective,
    Inject,
    LineSeries,
    DateTime,
    Legend,
    Tooltip
} from '@syncfusion/ej2-react-charts';
import {Browser} from '@syncfusion/ej2-base';

let data1 = [
    {x: new Date(2005, 0, 1), y: 21},
    {x: new Date(2006, 0, 1), y: 24},
    {x: new Date(2007, 0, 1), y: 36},
    {x: new Date(2008, 0, 1), y: 38},
    {x: new Date(2009, 0, 1), y: 54},
    {x: new Date(2010, 0, 1), y: 57},
    {x: new Date(2011, 0, 1), y: 70}
];

let data2 = [
    {x: new Date(2005, 0, 1), y: 28},
    {x: new Date(2006, 0, 1), y: 44},
    {x: new Date(2007, 0, 1), y: 48},
    {x: new Date(2008, 0, 1), y: 50},
    {x: new Date(2009, 0, 1), y: 66},
    {x: new Date(2010, 0, 1), y: 78},
    {x: new Date(2011, 0, 1), y: 84}
];

const SAMPLE_CSS = `
    .control-fluid {
        padding: 0px !important;
    }
        .charts {
            align :center
        }`;


class ChartList extends Component {

    render() {
        console.log("this.props.data: ", this.props.data)

        return (
            <ChartComponent
                id='charts'
                style={{textAlign: "center"}}
                palettes={this.props.data.sort((a, b) => a.id - b.id).map(value => value.color)}
                primaryXAxis={
                    {
                        title: 'Years',
                        valueType: 'DateTime',
                        labelFormat: 'y',
                        intervalType: 'Years',
                        edgeLabelPlacement: 'Shift',
                        majorGridLines: {width: 0}
                    }
                }
                primaryYAxis={
                    {
                        title: 'Persentage',
                        labelFormat: '{value}%',
                        rangePadding: 'None',
                        minimum: 0,
                        maximum: 100,
                        interval: 20,
                        lineStyle: {width: 0},
                        majorTickLines: {width: 0},
                        minorTickLines: {width: 0}
                    }
                }
                chartArea={{border: {width: 0}}}
                tooltip={{
                    enable: true,
                }}
                width={Browser.isDevice ? '100%' : '60%'}
                title='Inflation - Consumer Price'
            >
                <Inject services={[LineSeries, DateTime, Legend, Tooltip]}/>
                <SeriesCollectionDirective>
                    {
                        this.props.data.map((value) => {
                            console.log("value: ", value)
                                return (
                                    <SeriesDirective
                                        key={value.id}
                                        dataSource={value.data}
                                        visible={
                                            value.visible
                                        }
                                        xName='x'
                                        yName='y'
                                        name='Germany'
                                        width={2}
                                        marker={{visible: true, width: 10, height: 10}}
                                        type='Line'
                                        // onChange={this.handleChange}
                                    >
                                    </SeriesDirective>)
                            }
                        )
                    }
                </SeriesCollectionDirective>
            </ChartComponent>
        )
    }
}

export default class LineGraph extends Component {
    state = {
        data: [
            {
                id: 1,
                visible: true,
                color: "#E94649",
                data: data1,
            },
            {
                id: 2,
                visible: true,
                color: "#F6B53F",
                data: data2
            }
        ]
    }

    changeVisibility = (id) => {
        this.setState(prevState =>
            ({
                data: prevState.data.map((dataValue) => {
                    if (dataValue.id === id) {
                        console.log(dataValue)
                        return {
                            ...dataValue,
                            visible: !dataValue.visible
                        }
                    }
                    return dataValue
                })
            })
        )
    }
  

    render() {

        return (
            <div className='control-pane'>
                <style>
                    {SAMPLE_CSS}
                </style>
                <div className='control-section'>
                    <ChartList data={this.state.data}/>
                    <div>
                        <Button variant="contained" color="primary" onClick={() => this.changeVisibility(1)}>
                            Change visibility of the first graph
                        </Button>
                        <Button variant="contained" color="primary" onClick={() => this.changeVisibility(2)}> 
                            Change visibility of the second graph
                        </Button>
                    </div>
                </div>
            </div>
        )
    }
}

1 Reply
DG Durga Gopalakrishnan Syncfusion Team December 11, 2020 03:27 PM UTC

Hi Ericsson,

Greetings from Syncfusion.

We have ensured your reported scenario with provided code snippet. Currently, we are facing problem while hiding the series visibility using setState. We suggest you use chart refresh method to change the visibility. We have prepared sample as per and attached for your reference.

Sample : https://stackblitz.com/edit/react-cl26pf-sk7se5

Please revert us if you have any questions.

Regards,
Durga G


Loader.
Up arrow icon