{% macro chart(idChart,title,data,labels,colors ) %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>{{ title }}</span>
            </div>
            <div style="padding: 10px" class="col-sm-12 col-md-12 col-lg-12">
                <canvas id="{{ idChart }}" style="max-height: 650px;"></canvas>
            </div>
        </div>
    </div>
    <script type="application/javascript">
        let dataFor{{ idChart }} = {{ data|json_encode|convert_encoding('UTF-8', 'UTF-8')| raw }};
        let labelsFor{{ idChart }} = {{ labels|json_encode|convert_encoding('UTF-8', 'UTF-8')| raw }};
        let colorsFor{{ idChart }} = {{ colors|json_encode|convert_encoding('UTF-8', 'UTF-8')| raw }};
        let maxNumberFor{{ idChart }} = 0;
        let dataSetsFor{{ idChart }} = [];

        Object.values(dataFor{{ idChart }}).forEach((element, index) => {
            let data = [0, 0, 0, 0, 0, 0]
            data[index] = element
            if (element > maxNumberFor{{ idChart }}) {
                maxNumberFor{{ idChart }} = element
            }
            obj = {
                label: labelsFor{{ idChart }}[index],
                data: data,
                backgroundColor: colorsFor{{ idChart }}[index],
                borderColor: 'transparent',
                borderWidth: 0,
                borderSkipped: false,
            }
            dataSetsFor{{ idChart }}.push(obj)
        })
        const data{{ idChart }} = {
            labels: labelsFor{{ idChart }},
            datasets: dataSetsFor{{ idChart }}
        };
        const config{{ idChart }} = {
            type: 'bar',
            data: data{{ idChart }},
            options: {
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true,
                        max: Math.ceil(maxNumberFor{{ idChart }} * 1.2),
                        ticks: {
                            stepSize: 1,
                        },
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: ''
                    }
                }
            },
        };
        const chart{{ idChart }} = new Chart(
            $('#{{ idChart }}'),
            config{{ idChart }}
        );
    </script>
{% endmacro %}