ChartJS with Symfony 4.4 (UX component)

As you might now, Symfony released some UX components some weeks ago. I’m trying to generate some charts using the Symfony UX ChartJs. Everything works as expected, but unfortunately, I understood that I’m not able to reproduce entire logic for options using only PHP and I have to rely on stimulus controllers to extend the behavior in order to achieve some extra behavior for the charts.

What I’m trying to achieve is to show percentage (%) symbol next to those numbers. I followed multiple tutorials from Stackoverflow, but there’s no info for this component.

I created a new stimulus controller called percentage_controller.js and I have this code.

import {Controller} from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.options = {
            tooltips: {
                enabled: false
            },
            plugins: {
                datalabels: {
                    formatter: (value, ctx) => {
                        return value.toFixed(2) + "%";
                    }
                }
            }
        }
    }
}

I’m rendering the chart using this line: {{ render_chart(chart, {'data-controller': 'percentage'}) }}.

Do you have any idea what’s wrong and how I can achieve this behavior?

EDIT: I was able to find the answer. Please see it below!

Source: Symfony Questions

Was this helpful?

0 / 0

#chart.js #symfony