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

by

1👍

✅

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

Leave a comment