Friday, 22 July 2022

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

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);
},

enter image description here 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

  1. I can modify the code & get same output with chartjs@2 version?
  2. 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



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

No comments:

Post a Comment