0

I am trying to update Bar chart when a dropdown values getting change on a field. I tried all the answers here Destroy chart.js bar graph to redraw other graph in same <canvas>, but no luck. Can you please help me?

Below is the code that I have written to remove canvas element and recreate it

html

  <div class="p-grid">
            <div class="p-col-12" id="chart-bar">
                <canvas id="myBarChart"></canvas>
            </div>
        </div>

TS

const ctx: any = document.getElementById('myBarChart')
            ctx.remove();
            const canvas = document.createElement("canvas");
            canvas.setAttribute("id", "myBarChart");
            canvas.setAttribute('width','1007');  
            canvas.setAttribute('height','503');  
            canvas.setAttribute('style','display: block; box-sizing: border-box; height: 64vh; width: 35vw;');  
            const element = document.getElementById("chart-bar");
            element.appendChild(canvas);
            
            new Chart(ctx, {
                type: 'bar',
                data: chartData.value,
                options: chartOptions,
            })

Tried destroy() option as below. It didn't work

const chart = ref(null)

 if(chart.value){
                chart.value.destroy()
            }

            const ctx: any = document.getElementById('myBarChart')

           chart.value =  new Chart(ctx, {
                type: 'bar',
                data: chartData.value,
                options: chartOptions,
            })

I can see it's there in the DOM, but graph is not displaying

enter image description here

Purni
  • 297
  • 7
  • 19
  • _"I tried all the answers [here], but no luck."_ - what are we supposed to do with that? We can't tell if you did anything _wrong_, if you don't show us what exactly you did. – CBroe Feb 23 '22 at 13:05
  • I have added my code above that what I am trying now. Can you tell me what I am doing wrong here that I cannot see my graph there? – Purni Feb 23 '22 at 13:06
  • You did not actually do, what the answers to that other question suggested. – CBroe Feb 23 '22 at 13:07
  • I did. I tried destroy as above. It didn't work. So I tried to remove canvas and create it back – Purni Feb 23 '22 at 13:09
  • Of course that does not work - you are trying to create a _new_ `Chart` instance now (to then destroy that again) - but the error you are trying solve, prevented you from creating a new instance in the first place. You need to store the result of `new Chart(...)` into a variable, and then call the `destroy` method on that, before you try to create a new instance. – CBroe Feb 23 '22 at 13:13
  • I updated it now. Is that the correct way? Still I am getting error though – Purni Feb 23 '22 at 13:17
  • No, you are _still_ trying to create a new instance, at a point where you currently _can't_ create a new one. You need to store the _actual_ Chart instance into a variable, not create a second one. – CBroe Feb 23 '22 at 13:19
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242330/discussion-between-purni-and-cbroe). – Purni Feb 23 '22 at 13:22
  • Can you show me the steps please? I want to create a new instance again after destroy – Purni Feb 23 '22 at 13:35
  • Are you actually following up with the chat now, or ...? – CBroe Feb 23 '22 at 14:42
  • Yes I do follow the chat – Purni Feb 23 '22 at 17:35
  • So where exactly did you place `const chart = ref(null)` - not just before the `if`, as shown? You can't set it to null _every_ time, that needs to happen only once before the whole process starts. – CBroe Feb 24 '22 at 07:50
  • Yes that's how I have defined. I've declared this once as a global variable outside this function. – Purni Feb 26 '22 at 08:07

1 Answers1

-1

Because you have removed that and after create new now you have to add again.

 ctx = document.getElementById('myBarChart');
     new Chart(ctx, {
                    type: 'bar',
                    data: chartData.value,
                    options: chartOptions,
                })
Shakti Srivastav
  • 190
  • 5