jQuery(document).ready(function($)
{
    document.fonts.ready.then(function() {
        Chart.defaults.font.family = "'Rubik', Helvetica";
        Chart.defaults.color = "#000000";

        var canvasMonth = document.getElementById("month").getContext('2d');
        var chartMonth = new Chart(canvasMonth, {
            type: 'bar',
            data: {
                labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                datasets: [{
                    label: 'nombre de tableaux',
                    data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
                    backgroundColor: '#2589BD',
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        }
                    },
                    xAxes: {
                        grid: {
                            lineWidth: 0
                        },
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
        });

        var canvasYear = document.getElementById("year").getContext('2d');
        var chartYear = new Chart(canvasYear, {
            type: 'bar',
            data: {
                labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
                datasets: [{
                    label: 'nombre de tableaux',
                    data: [24, 16, 7, 57, 117, 112, 52],
                    backgroundColor: '#2589BD',
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        }
                    },
                    x: {
                        grid: {
                            lineWidth: 0
                        },
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
        });

        var canvasDimension = document.getElementById("dimension").getContext('2d');
        var chartDimension = new Chart(canvasDimension, {
            type: 'bar',
            data: {
                labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
                datasets: [{
                    label: 'nombre de tableaux',
                    data: [2, 42, 173, 59, 107],
                    backgroundColor: '#2589BD',
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        titleFont: {
                            size: 13
                        },
                        bodyFont: {
                            size: 13
                        },
                    },
                    legend: {
                        display: false,
                        position: "bottom",
                    },
                },
                responsive: true,
                scales: {
                    y: {
                        ticks: {
                            beginAtZero: true
                        },
                        grid: {
                            lineWidth: 0
                        },
                        title: {
                            display: true,
                            text: 'Tableaux'
                        },
                        stacked: true,
                    },
                    x: {
                        grid: {
                            lineWidth: 0
                        },
                        stacked: true,
                    }
                },
                animation: {
                    duration: 0
                },
                responsiveAnimationDuration: 0
            }
        });
    });
});