Reload child chartJS component onchange of slider value from parent component in LWC

Question

It is working after I refresh the entire page but I need the child component to reload.

Parent Component :

<template if:true={chartConfigurationSubjective}>
                  <c-acc-child-healthscorechart chart-config={chartConfigurationSubjective}></c-acc-child-healthscorechart>
                </template>
                 <input id="myinput" min="25" max="70" type="range" value={val} oninput={handleChange} />
                 <p>Selected Health Score : {score}</p>  <lightning-button label="Save" onclick={refreshComponent}></lightning-button></p>

Parent JS : Wired method to get the value and create the chart configuration(chartConfig used in child js). ...

handleChange(event) {
    let slidervalue = event.target.value;
    if (slidervalue > 50) {
        this.score = 'Green';
    } else if (slidervalue > 25 && slidervalue <= 50) {
        this.score = 'Yellow';
    } else {
        this.score = 'Red';
    }
    const fields = {};
    fields[ID_FIELD.fieldApiName] = this.recordId;
    fields[SCORE_FIELD.fieldApiName] = this.score;

    const selectedRecordInput = {
        fields
    };
    updateRecord(selectedRecordInput)
    .then(() => {
        console.log('calculatedScore' + this.score);
        return refreshApex(this.wiredAccResult);
    }).catch(error => {
        console.error(error);
    });

}

Child Component :

<template>
    <div class="slds-p-around_small slds-grid slds-grid--vertical-align-center slds-grid--align-center">
        <canvas class="chart" lwc:dom="manual"></canvas>
        <div if:false={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
            <lightning-spinner alternative-text="Loading" size="medium" variant="base"></lightning-spinner>
        </div>
    </div>
</template>

Child JS:

    @api chartConfig;
    isChartJsInitialized;
    renderedCallback() {
        if (this.isChartJsInitialized) {
            return;
        }
        // load chartjs from the static resource
        Promise.all([loadScript(this, chartjs)])
        .then(() => {
            this.isChartJsInitialized = true;
            const ctx = this.template.querySelector('canvas.chart').getContext('2d');
            this.chart = new window.Chart(ctx, JSON.parse(JSON.stringify(this.chartConfig)));
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading Chart',
                    message: error.message,
                    variant: 'error',
                })
            );
        });
    }
}

Answer 1

You don't need to "reload" the page, just update the component's data. There's an example of this in the documentation:

myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

For your own code, it'd look something like:

this.chart.data = [...this.wiredAccResult.data]
this.chart.update();

You'll need to write an explicit wire handler in order to make this work:

@wire(myMethod, { params }) wiredAccHandler(result) {
  this.wiredAccResult = result;
  if(result.data && this.chart) {
    this.chart.data = [...result.data];
    this.chart.update();
  }
}