{# 


    {% include '@GlobalApplication/Highcharts/template_conso_budget.twig' with {
        'id' : random(),
        'title' : '',
        'libAxes' : '',
        'devise' : '', 
        'MontantBudget' : '', 
        'DejaConsomme' : '',  
        'ConsoDocument' : '',
    } %}

#}

    {% if percent >= 100 %}
        {% set colorBarre = '#FD0D0D' %}
        {% set colorBackground = 'rgba(253, 13, 13, 0.3)' %}
    {% elseif alerte and percent >= alerte %}
        {% set colorBarre = '#FF6B3D' %}
        {% set colorBackground = 'rgba(255, 107, 61, 0.3)' %}
    {% else %}
        {% set colorBarre = '#3b7a3b' %}
        {% set colorBackground = 'rgba(59, 122, 59, 0.3)' %}
    {% endif %}
    
    <div id="highcharts{{ id }}" style="width:{{size}}px;"></div>

    <script>
    $('#highcharts{{ id }}').highcharts({

        credits: {
            //enabled: false
            href: 'https://oxalys.com',
            text: 'Oxalys'
        },

        chart: {
            type: 'column'
        },

        exporting: { 
            enabled: false 
        },
        title: {
            text: '{{ title |e('js')|raw }}',
            align: 'left'
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            categories: ['{{ libAxes |e('js')|raw }}']
        },

        yAxis: {
            visible: false,
            allowDecimals: false,
            min: 0,
            title: {
                text: '{{ 'Montant' | trad }}'
            }
        },
        plotOptions: {
            series: {
                borderRadius: {
                    radius: 10
                },
                grouping: false,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    allowOverlap : true,
                    inside: false,
                    style: {
                        textShadow: 'none',
                    }
                }
            },
            column: {
                stacking: 'normal',
                pointWidth: '65',
            },
        },

        series: [{
            color: '{{ colorBackground }}',
            pointPlacement: 0,
            data: [{{ MontantBudget |replace({' ' :''}) }}],
            name: '{{ 'Montant budget' | trad }}',
            pointWidth: '80',    
            dataLabels: {
                x:-100,
                y:10,
                color:'rgb(0, 0, 0)',
                formatter: function () {
                    var label = this.series.name+' : <br/>';
                    label += Highcharts.numberFormat(this.y,2)+ ' {{ devise }}';
                    
                    return label;
                },
            }   
            /*dataLabels: {
                formatter: function () {
                    var label = this.series.name+' : <br/>';
                    label += Highcharts.numberFormat(this.y,2)+ ' {{ devise }}';

                    return label;
                },
                color:'#7C7C7C',
                x:-100,
                y:10,
                style: {
                    textShadow: 'none',
                }
            } */
        }, {
            color : '#000000',
            pointPlacement: 0,
            name: '{{ 'Conso. document' | trad }}',
            data: [{{ ConsoDocument |replace({' ' :''}) }}],
            stack: 'SI S1',
            dataLabels: {
                formatter: function () {
                    var label = this.series.name+' : <br/>';
                    var label = '';
                    label += Highcharts.numberFormat(this.y,2)+ ' {{ devise }}';

                    return label;
                },
                x:0,
                y:0,
                color:'#000000',
            }
        },{
            color : '{{ colorBarre }}',
            pointPlacement: 0,
            name: '{{ 'Déjà consommé' |trad }}',
            data: [{{ DejaConsomme |replace({' ' :''}) }}],
            stack: 'SI S1',
            dataLabels: {
                x:100,
                y:10,
                color:'{{ colorBarre }}',
                formatter: function () {
                    var label = this.series.name+' : <br/>';
                    label += Highcharts.numberFormat(this.y,2)+ ' {{ devise }}';
                    
                    return label;
                },
            }
        }]

    }, function(chart) {
        var text = chart.renderer.text(
            '{{ percent | prix }}%',
            0,
            300
        ).attr({
            zIndex: 5
        }).add().css({
            color: '{{ colorBarre }}',
            fontWeight: 'bold',
            fontSize: '20px',
        });
        textBox = text.getBBox();
    });


    </script>
    