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

Question

I've plots build with 2 different versions of chart.js. one is with 3.8.0 & other is with 2.8.0. So, I'm including both the versions in tags like this.

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0"></script>   #For plot1
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>   #for plot2

-->Both are color plots. so whenever i use js@3.8.0 first It's plotting plot1 as color. But, plot2 I'm getting with no color's.

-->Similarly when I use js@2.8.0 as first src

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>   #for plot2
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0"></script>   #For plot1

plot1I'm getting withno color&plot2withcolor`

I get it that in Html executes script src line by line. is there is any way to use different chartjs versions at a time?. Any reference pls?

You guys want to upload the code?. It's a very big source code. So, I just want to get thoughts for my issue from the community people

Chart.js @3.8.0 version code I'm using
Fiddle https://jsfiddle.net/rnsbhargav/x10qjr5k/3/

graph2() {

    const options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          segment: {
            borderColor: (ctx) => (ctx.p0.parsed.y < ctx.p1.parsed.y ? 'green' : 'red')
          }
        }]
      },
      options: {}
    }

    const ctx = document.getElementById('mychart').getContext('2d');
    new Chart(ctx, options);
},

So this in chartjs 3.8.0. Should I need to downgrade syntax?. If so how to make this code work on chartjs 2.0 version...

I found After digging some documentation I came to know that syntax migrated for @chartjs2 to chartjs3 is different...

so is there is anyway

I can modify the code & get same output with chartjs@2 version?

Is there is any way we can use .noconflict method we use normally on Jquery? so that i can use 2 different versions on source tags

https://www.chartjs.org/docs/master/getting-started/v3-migration.html

score 1 · Accepted Answer · answered Jul 20 '22 at 18:57

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>

Hi there again @LeeLenalee ...Let me check & try once...Thanks again for yor time!! — , Jul 20 '22 at 19:01
It worked!!!!!!!!!!!!!!!!!!.....Finally I came out from loop...thank you man — , Jul 20 '22 at 19:27
@LeeLenalee, I have this similar problem, but the case is different. Please, can you see my question? Here is https://stackoverflow.com/questions/73022281/can-one-use-both-hightlight-js-and-prism-js-in-the-same-html-to-test-and-modify — Oo'-, Jul 20 '22 at 19:45

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

1 Answers1