Canvas already in use, chart with ID '0' must be destroyed

Ask the community
,
1

I’m trying to modify the Wix example for creating a chart with a Custom Element to update dynamically based on a drop down menu.

I can get the site to work as designed in Preview mode, but when I publish to Live, I get the following error when attempting to change the dropdown:

“Uncaught Error: Canvas is already in use. Chart with ID ‘0’ must be destroyed before the canvas with ID ‘myChart’ can be reused.”

Why would it work in Preview but not Live?

Here is the page code I changed. The chart.js, chart-api.js and chart-customization.js scripts are unchanged from the example.

import { ChartJSAPI } from ‘public/chart-api’ ;
import { chartCustomization } from ‘public/chart-customization’ ;
import wixData from ‘wix-data’ ;
$w . onReady ( () => {
$w ( ‘#market’ ). options = [
{ “label” : “NASDAQ-100 Consolidated - CHICAGO MERCANTILE EXCHANGE” , “value” : “NASDAQ-100 Consolidated - CHICAGO MERCANTILE EXCHANGE” },
{ “label” : “AUSTRALIAN DOLLAR - CHICAGO MERCANTILE EXCHANGE” , “value” : “AUSTRALIAN DOLLAR - CHICAGO MERCANTILE EXCHANGE” },
{ “label” : “BITCOIN - CHICAGO MERCANTILE EXCHANGE” , “value” : “BITCOIN - CHICAGO MERCANTILE EXCHANGE” },
{ “label” : “E-MINI S&P FINANCIAL INDEX - CHICAGO MERCANTILE EXCHANGE” , “value” : “E-MINI S&P FINANCIAL INDEX - CHICAGO MERCANTILE EXCHANGE” },
{ “label” : “S&P 500 Consolidated - CHICAGO MERCANTILE EXCHANGE” , “value” : “S&P 500 Consolidated - CHICAGO MERCANTILE EXCHANGE” }
]

let  market  =  $w ( '#market' ). value

let chart = new ChartJSAPI ( $w ( ‘#CustomElement1’ ));
chart . customization = chartCustomization ;

$w ( ‘#market’ ). onChange ( async function ( event ) {
market = event . target . value
let chart = new ChartJSAPI ( $w ( ‘#CustomElement1’ ));
chart . customization = chartCustomization ;
const chartItems = await wixData
. query ( “COT_Legacy” )
. eq ( “market_and_exchange_names” , market )
. ascending ( “date” )
. limit ( 60 )
. find ()
. then ( res => res . items )
const labels = chartItems . map ( item => ( item . date ));
const comm = chartItems . map ( item => Number ( item . comm_positions_net ));
const nonComm = chartItems . map ( item => Number ( item . nonComm_positions_net ))
const smallSpec = chartItems . map ( item => Number ( item . nonRept_positions_net ))

chart . data  = { 
    labels , 
    datasets : [{  label :  'commercial' ,  data :  comm ,  backgroundColor : [ 'red' ],  borderColor : [ 'black' ],  borderWidth :  1 }, 
    { label :  'large speculators' ,  data :  nonComm ,  backgroundColor : [ 'blue' ],  borderColor : [ 'black' ],  borderWidth :  1 }, 
    { label :  'small speculators' ,  data :  smallSpec ,  backgroundColor : [ 'yellow' ],  borderColor : [ 'black' ],  borderWidth :  1 }] 
}

})
});