[Chartjs]-Multiple labels for multiple data-sets in chart.js

1👍

Here is the working code of the following question. I used one label set and update it on the button click. Similarly, I updated the datasets.


import React from 'react';

import {Line} from 'react-chartjs-2';


const checkinsData={
    labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
    datasets:[
        {
        label:"Day",
        backgroundColor:"blue",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        data:[4,5,6,7,8,9,10,11,12,1,2,3,4]

        }


    ]
}




class CheckinGraph extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={
            key: Date.now()


        }
        this.setDayData=this.setDayData.bind(this);
        this.setWeekData=this.setWeekData.bind(this);
        this.setMonthData=this.setMonthData.bind(this);
    }

    setDayData=function() {
        checkinsData.datasets.backgroundColor="blue";
        checkinsData.labels=['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'];
        checkinsData.datasets[0].data=[4,5,6,7,8,9,10,11,12,1,2,3,4];

        this.setState({ key: Date.now() });

    }
    setWeekData=function()
    {
        checkinsData.datasets.backgroundColor="green";
        checkinsData.labels=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
        checkinsData.datasets[0].data=[40,50,16,18,80,29,10];

        this.setState({ key: Date.now() });
    }
    setMonthData=function()
    {
        checkinsData.datasets.backgroundColor="purple";
        checkinsData.labels=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
        checkinsData.datasets[0].data=[100,120,200,256,560,178,280,190,370,100,300,200];

        this.setState({ key: Date.now() });
    }

    render()
    {
        return(
            <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
                <ul className="list list-inline graph-label-list">
                    <li className="list-inline-item" onClick={this.setDayData}>
                        Day
                    </li>
                    <li className="list-inline-item" onClick={this.setWeekData}>
                        Week
                    </li>
                    <li className="list-inline-item" onClick={this.setMonthData}>
                        Month
                    </li>

                </ul>

            <Line
            redraw
        data={checkinsData}
        options={
            {
                title:{
                    display:false
                },
                legend:{
                    display:false
                }

            }
        }
        />
            </div>

        )
    }
}

export default CheckinGraph;


1👍

Your x-axis should be constant. So you can’t have more than one kind of data there. In your case, you want time, week day and month name on x-axis at the same time which is not possible in single graph. You can either generate three graphs or populate different data set on same graph by triggering events (like click etc).

What i mean is, when day button is click, data set for day will populated with labels, ‘4 P.M’,’5 P.M’,’6 P.M’, when month is click, data set for month with labels ‘jan’,’feb’ etc should be populated

0👍

You incorrectly listed “Jun’, please be consistent in using quotes.
Just fix “Jun’ to ‘Jun’ and everything should work.

Bonus, please look up some coding styles:

Google JavaScript Style Guide,
Airbnb JavaScript Style Guide etc.

Leave a comment