Question

29

Chart.js Line-Chart with different Labels for each Dataset

rated 0 times [ 36] [ 7] / answers: 1 / hits: 41433 / 8 Years ago, wed, june 29, 2016, 12:00:00

Using Chart.js you can create line charts and for that you have to privde labels and datasets. for example:

var data = {

    labels: [January, February, March, April, May, June, July],

    datasets: [

        {

            label: My First dataset,

            fill: false,

            lineTension: 0.1,

            backgroundColor: rgba(75,192,192,0.4),

            borderColor: rgba(75,192,192,1),

            borderCapStyle: 'butt',

            borderDash: [],

            borderDashOffset: 0.0,

            borderJoinStyle: 'miter',

            pointBorderColor: rgba(75,192,192,1),

            pointBackgroundColor: #fff,

            pointBorderWidth: 1,

            pointHoverRadius: 5,

            pointHoverBackgroundColor: rgba(75,192,192,1),

            pointHoverBorderColor: rgba(220,220,220,1),

            pointHoverBorderWidth: 2,

            pointRadius: 1,

            pointHitRadius: 10,

            data: [65, 59, 80, 81, 56, 55, 40],

        }

    ]

};

The Problem here is that you have a fix amount of labels (7 in this case) and you also need to provide 7 data entries for each dataset. Now what if you have an unknown amount of labels and data entries?

What if one data entry contains a number and a time:

Entry {

    number: 127

    time: 10:00

}

What if you want to show all times on the X-Axis and all Numbers on the Y-Axis sorted by the time on the X-Axis. Is that possible with Chart.js?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cameron

Add To Favorites

Follow

Total Points: 591

Total Questions: 112

Total Answers: 88

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

answered 8 Years ago rocioblancac · Accepted Answer

I had a battle with this today too.
You need to get a bit more specific with your dataset. In a line chart datasets is an array with each element of the array representing a line on your chart. Chart.js is actually really flexible here once you work it out. You can tie a line (a dataset element) to an x-axis and/or a y-axis, each of which you can specify in detail.

In your case if we stick with a single line on the chart and you want the time part of the entry to be along the bottom (the x-axis) then all your times could go into the labels array and your number would be pin-pointed on the y-axis. To keep it simple without specifying our own scales with x and y axes and given this data:

var MyData = [{time:10:00, number: 127},

              {time:11:00, number: 140},

              {time:12:00, number: 135},

              {time:13:00, number: 122}];

You could set up the data property of your chart to be:

var data = {

    labels: [10:00, 11:00, 12:00, 13:00],

    datasets: [

        {

            label: My First dataset,



            // Insert styling, colors etc here



            data: [{x: 10:00, y: 127},

                   {x: 11:00, y: 140},

                   {x: 12:00, y: 135},

                   {x: 13:00, y: 122}]

        }

    ]};

Note that the data array is now a bit more specific with each element of data plotting itself on the x-axis by referencing one of the labels rather than just being a raw number. You can now put another dataset object in the datasets array following this pattern and have two lines, obviously give your lines different colours and names (label).

Hope this helps.