ChartJs - How to update the internal text using Doughnutlabel Plugin

Viewed 584

I have this graph statically, build a service in PHP and through the return with Ajax I would like to update the data dynamically.(Chart.js Doughnut plugin) However, I was unable to update the chart even though I put it inside Ajax's Success.

            // re-render the chart
            myChart.data.labels.push("Post " );
            myChart.update();

enter image description here

I needed to update the 2 values: $ 8,000 and another amount $ 500 How can I dynamically update?

        var myChart;
    // Doughnut with multiple lines of text in the center
    //function GerarGrafico(saldoBruto, rendBruto) {
        var ctx = document.getElementById('chart1').getContext('2d');
        myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: [
                    "Conservative",
                     "Moderate",
                     "Aggressive"
                ],
                datasets: [{
                    backgroundColor: [
                        "#4FC1E9",
                        "#FFA500",
                        "#967ADC"
                    ],
                    borderColor: "rgba(255,255,255,0.5)",
                    data: [0.4, 0.9, 0.7],
                    borderWidth: [0, 0, 0, 0]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: false,
                    position: 'top',
                },
                title: {
                    display: false,
                    fontSize: 20,
                    text: 'Multiple lines of text'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                cutoutPercentage: 92,
                layout: {
                    padding: {
                        bottom: 10
                    }
                },

                plugins: {
                    doughnutlabel: {
                        labels: [
                            {
                                text: '   My investments   ',

                                font: {
                                    size: '18',
                                    family: 'Roboto',
                                    style: 'normal',
                                    weight: '500',
                                    horizontalCenter: "middle",
                                    verticalCenter: "middle"

                                },

                                sidePadding: 15,


                                color: '#161515'

                            },
                            {
                                text: 'Gross Balance',
                                font: {
                                    size: '12',
                                    family: 'Roboto',
                                    style: 'normal',
                                    weight: 'normal'
                                },
                                color: '#979797'
                            },
                            {
                                text: 'U$ 8.000',
                                font: {
                                    size: '23',
                                    family: 'Roboto',
                                    style: 'normal',
                                    weight: '500'
                                },
                                color: '#161515'
                            },
                            {
                                text: '--------------------',
                                font: {
                                    size: '12',
                                    style: 'normal',
                                    weight: 'normal'
                                },
                                color: '#979797'
                            },
                            {
                                text: 'Gross income',
                                font: {
                                    size: '12',
                                    style: 'normal',
                                    weight: 'normal'
                                },
                                color: '#979797'
                            },

                            {
                                text: 'U$ 500',
                                font: {
                                    size: '15',
                                    style: 'normal',
                                    weight: 'bold'
                                },
                                color: '#161515'
                            }
                        ]
                    }
                }
            }
        });
    //}
</script>
0 Answers
Related