Changing chart options dynamically in Chart.js

Question

I have a page where I load different charts dynamically which update themselves with new data from an SQL-table. They have maximum and minimum limits and I can make the dots on the line charts change color if they breach their limits (if too high or too low they become red , otherwise they are green)

Sadly, when I try changing the charts animation option, or bezierCurves option it does not respond to it, I looked on the chartjs page's documentation and could only find how to set these options when creating the chart... I need to do this on an interval based function after the charts are made depending on user input... i.e.

I have a collection of radio buttons : Animated - Not animated - bezierCurves - No bezierCurves

See on pic :)

They each set their respectable variable to true / false depending wether they are checked. Then , every time I update the charts , i try to change the options to the value of the variables (if they differ from the old ones)

Let me give you some code to clairify :)

Update function :

    // Standard values for all charts
$old_animation = true;
$old_curved = true;

// Start Update funtion for the test chart
setInterval(function update() {

// Set the new options value from the entered user input (on the site)
$curved = $('#curved').val();
    $animation = $('#animation').val();
    if ( $old_animation != $animation || $old_curved != $curved) {

        test_chart.options.animation = $animation;
        test_chart.options.bezierCurves = $curved;

        // Tried the following as well
        //test_chart.animation = $animation;
        //test_chart.options.animation = $animation;


        $old_animation = $animation;
        $old_curved = $curved;
    }

    // Set dataset point 0 value to that of point 1, point 1 to that of point 2 and so on...
    test_chart.datasets[0].points[0].value = test_chart.datasets[0].points[1].value;
    test_chart.datasets[0].points[1].value = test_chart.datasets[0].points[2].value;
    test_chart.datasets[0].points[2].value = test_chart.datasets[0].points[3].value;
    test_chart.datasets[0].points[3].value = test_chart.datasets[0].points[4].value;
    test_chart.datasets[0].points[4].value = test_chart.datasets[0].points[5].value;
    test_chart.datasets[0].points[5].value = test_chart.datasets[0].points[6].value;
    test_chart.scale.xLabels[0] = test_chart.scale.xLabels[1];
    test_chart.scale.xLabels[1] = test_chart.scale.xLabels[2];
    test_chart.scale.xLabels[2] = test_chart.scale.xLabels[3];
    test_chart.scale.xLabels[3] = test_chart.scale.xLabels[4];
    test_chart.scale.xLabels[4] = test_chart.scale.xLabels[5];
    test_chart.scale.xLabels[5] = test_chart.scale.xLabels[6];

    // Get the latest SQL value from the live feed div (hidden) and put that in the last data point
    $live_test = $('#live_test').html();
    $live_test = parseInt($live_test);
    $live_test = $live_test / <?php echo $column_numerator; ?>;

    // Get the last update time for the label of the last data point
    $live_updated = $('#live_updated').html().substr(11);
    test_chart.scale.xLabels[6] = $live_updated;
    test_chart.datasets[0].points[6].value = $live_test;
    console.log('Latest test value = ' + $live_test + ' this has been updated @: ' + $live_updated);




    temperature_chart.update();
}, 4000);

Ferrell Carr Ferrell Carr · Accepted Answer · 2019-02-15T18:47:36

That is not correct. To change the options use chart.options where chart = this.chart.

Instead of updating the data, go through the chart object to update the data. Then use chart.update(). This uses the click event to see if only one legend is displaying. If it is then it displays the data labels.

legend: {
    display: true,
    onClick: function (e, legendItem) {
        var index = legendItem.datasetIndex;
        var ci = this.chart;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        var cnt = 0;
        for (var i = 0; i < ci.data.datasets.length; i++) {
            if (!ci.data.datasets[i]._meta[0].hidden) {
                cnt++;
            }
        }
        if (cnt === 1) {
            ci.options.plugins.datalabels.display = true;
        }
        else {
            ci.options.plugins.datalabels.display = false;
        }
        ci.update();
    }
}

Changing chart options dynamically in Chart.js

2 Answers