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

Question

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

985 views Asked by AudioBubble At 18 July 2022 at 18:25

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/[email protected]"></script>   #For plot1
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>   #for plot2

-->Both are color plots. so whenever i use [email protected] first It's plotting plot1 as color. But, plot2 I'm getting with no color's.

-->Similarly when I use [email protected] as first src

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>   #for plot2
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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

Original Q&A

There are 1 answers

**LeeLenalee** · Accepted Answer · 2022-07-20T18:57:10+00:00

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>

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CHART.JS

Related Questions in CHART.JS2

Related Questions in CHART.JS3

Popular Questions

Popular Tags

Trending Questions