Chartjs-How to use 2 different versions of chart.js in same html source tag

by

1👍

✅

You can load the old version of chart.js, store it in a variable, then load the new version also store it and then you can use both, as you can see in the example below old version filled by default and had beziercurves enabled, v3 does not fill by default and has sharp lines:

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <canvas id="chartJSContainer2" width="600" height="400"></canvas>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script>
    const chartOld = Chart;
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
  <script>
    const chartNew = Chart;

    const options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: 'orange'
          },
          {
            label: '# of Points',
            data: [7, 11, 5, 8, 3, 7],
            borderColor: 'pink'
          }
        ]
      },
      options: {}
    }

    const ctx = document.getElementById('chartJSContainer').getContext('2d');
    const ctx2 = document.getElementById('chartJSContainer2').getContext('2d');

    new chartNew(ctx, options);
    new chartOld(ctx2, options);
  </script>
</body>

Leave a comment