Multiple labels for multiple data-sets in chart.js

Question

I am using chart.js in react to create Line charts. I have to show data of the day, month and year. For the day I have different labels and data, for the month I have different labels and data, while for the year I have also different labels and data.

I am able to add multiple datasets and it works fine, but when I try to add multiple labels, it didn't work. Here is my code.

Live code demo: https://codesandbox.io/s/objective-bird-8owf1

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]

        },
        {
            label:"Week",
        backgroundColor:"green",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        labels:['Sun','Mon','Tue','Web','Thu','Fri','Sat'],
        data:[1,2,3,4,5,6,7]
        },
        {
            label:"Month",
        backgroundColor:"red",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        data:[1,2,3,4,5,6,7,8,9,10,11,12]
        }


    ]
}

<div className="col-md-8  default-shadow bg-white pd-30-0 border-radius-10 align-center">
                    <Line
                data={checkinsData}
                options={
                    {
                        title:{
                            text:'Total Check-ins',
                            fontSize:20,
                            display:true
                        },
                        legend:{
                            display:true,
                            position:'top'
                        }
                    }
                }
                />
                    </div>

An online demo would be preferred. – keikai Mar 30 '20 at 08:20 — keikai, Mar 30 '20 at 08:20
@keikai live demo code added. – Pranay kumar Mar 31 '20 at 05:05 — Pranay kumar, Mar 31 '20 at 05:05

score 1 · Answer 1 · answered Mar 31 '20 at 10:13

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

score 1 · Accepted Answer · answered Apr 02 '20 at 05:02

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;

This code helped me a lot, so i got idea to change in dynamic data. Thank you so much — Abhi, Jun 23 '21 at 05:13

score 0 · Answer 3 · answered Mar 30 '20 at 10:06

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.

answered Mar 30 '20 at 10:06

zmaj0dnocaja

151
3

Because of that type the code could not be compiled. After that was fixed, everything was working on my end. If that was not the problem, what is? https://prnt.sc/rpdj8y – zmaj0dnocaja Mar 30 '20 at 10:57
Yes, code is working, I just want to update the code so that the x-axis label gets changed for every dataset. right now it is fixed for all three data sets. – Pranay kumar Mar 30 '20 at 11:19
For the day dataset, labels would be '4 A.M', '5 A.M', etc. For week dataset labels would be 'Sun', 'Mon', etc and for month datasets labels would be 'Jan', 'Feb', etc. – Pranay kumar Mar 30 '20 at 11:21
Sorry for the delay. A rather dirty implementation, but you could try to catch some event and dynamically change the labels array on the checkinsData object, but that would be prone to future bugs. Reading the docs for the chart.js, I didn't see any support for the behavior you are looking for, so see about taking the approach suggested by Ijhar Ansari, or use some other library to achieve the desired functionality. – zmaj0dnocaja Mar 31 '20 at 22:56

Multiple labels for multiple data-sets in chart.js

3 Answers3