<script>
import { Line } from "vue-chartjs";
Chart.defaults.global.defaultFontFamily = '"B Yekan","arial"';
Chart.defaults.global.defaultFontSize = 14;
// Chart.canvas.parentNode.style.height = '600px';


export default {
    extends: Line,
    data() {
        return {
            datacollection: {
                datasets: [{
                    label: ' بازدید وبسایت شما ',
                    borderColor: '#ee3552',
                    backgroundColor: '#ee3552',
                    fill: false,
                    data: [10, 25, 15, 45, 65, 15]
                }, {
                    label: ' باز دید صفحه ی شما در ویلامال ',
                    borderColor: '#32c5d2',
                    backgroundColor: '#32c5d2',
                    fill: false,
                    data: [15, 30, 20, 10, 25, 5],
                }],
                labels: ['مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
            },

            options: {
                tooltips: {
                    borderWidth: 1,
                    borderColor: '#eeeeee',
                    titleFontStyle: 'lighter',
                    titleFontColor: '#000',
                    titleMarginBottom: 10,
                    bodyFontColor: '#000',
                    backgroundColor: '#fff',
                    xPadding: 16,
                    yPadding: 8,
                },
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: true,
                            },
                            gridLines: {
                                display: true,
                            }
                        }
                    ],
                    xAxes: [
                        {
                            gridLines: {
                                display: false
                            }
                        }
                    ]
                },
                legend: {
                    display: true
                },
                responsive: true,
                maintainAspectRatio: false
            }
        };
    },
    mounted() {
        this.renderChart(this.datacollection, this.options);
    }
};
</script>
