how to show several labels and data's in the chart.js similar to npmtrend website?

Question

im trying to display several data in one point in chart.js library , the same as the above picture npm website, but it only show one data sets !

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            label: '# ages',
            data1: [14, 13, 32, 25, 32, 31],
            label: '# numbers',
            data2: [11, 12, 19, 15, 20, 21],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

i have to display data,data1,data2 values , but it only shows the data value! isn't there any solution for this issue please!? or isnt there any other js libraries to achieve it ?! thank you ..

I would assume that you would need multiple layers and only display 1 dataset per layer. Think of it like transparent sheets overlapping one another. You would need to be able to hide and show the individual layers to see the data that exists for each point. — edjm, Mar 12 '21 at 11:49
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div. I've not used the charts.js stuff but I'm assuming that you would need to place a chart into each unique
layer. — edjm, Mar 12 '21 at 11:57

LeeLenalee · Accepted Answer · 2021-03-12T15:28:46.650

You cant have multiple data arrays in a dataset, you will need to make 1 dataset for every data array.

var ctx = document.getElementById('chartJSContainer');

const borderColor = [
  'rgba(255, 99, 132, 1)',
  'rgba(54, 162, 235, 1)',
  'rgba(255, 206, 86, 1)',
  'rgba(75, 192, 192, 1)',
  'rgba(153, 102, 255, 1)',
  'rgba(255, 159, 64, 1)'
];

const backgroundColor = [
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)',
  'rgba(255, 206, 86, 0.2)',
  'rgba(75, 192, 192, 0.2)',
  'rgba(153, 102, 255, 0.2)',
  'rgba(255, 159, 64, 0.2)'
];
const fill = false;
const borderWidth = 1;

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor,
        borderColor,
        borderWidth,
        fill
      },
      {
        label: '# ages',
        data: [14, 13, 32, 25, 32, 31],
        backgroundColor,
        borderColor,
        borderWidth,
        fill
      },
      {
        label: '# numbers',
        data: [11, 12, 19, 15, 20, 21],
        backgroundColor,
        borderColor,
        borderWidth,
        fill
      }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

EDIT: From what I understand of your image this is what you want, tooltip on mode index and intersect false and remove fill from lines

Question: With regards to chart.js, are you able to have multiple entries for a single location point and distinguish them from one another? — edjm, Mar 12 '21 at 11:58
How do you mean that, if you have 2 or more points in a line chart on the same spot they will overlap, you will need to click the legend to turn off some points to see the others, if you hover over them the tooltip shows them all. If you choose a bar chart you will get seperate bars for them and they wont overlap — LeeLenalee, Mar 12 '21 at 12:04
@LeeLenalee , thank you , and what if i want to instead creating several lines it will show only in one line but it show all in one line , and display like this : blue ; of votes : 19 , ages : 13 , numbers : 12 , is it possible ?!it make a little complicated chart to understand — artiest, Mar 12 '21 at 12:04
where you set your data and backgroundColor for each dataset you can add the property showLine: false for all datasets except the first one, this makes it so that only that one draws the line but you will need to make your datapoints so that they will spawn on that line, best way to do that is by disabeling bezier curves — LeeLenalee, Mar 12 '21 at 12:07
@LeeLenalee can you add it to your snippet please , i will update the question with a picture of what i expect — artiest, Mar 12 '21 at 12:19
@HunarMohammed Edited sample to what looks like what you want — LeeLenalee, Mar 12 '21 at 15:29

how to show several labels and data's in the chart.js similar to npmtrend website?

1 Answers1