Can't trigger beforeDraw with Vue-Chartjs (or any other plugins)

user_14111261 0
Viewed 1190

I'm trying to add custom text to the Chartjs chart (using vue-chartjs), what I've found out so far is that I need to do this via beforeDraw (or similar) plugin. I included the plugin in the options.plugins, but it doesn't get triggered.

What am I doing wrong? Here's the code

<script>
import {Scatter} from "vue-chartjs";

export default {
    extends: Scatter,
    props: {
        chartdata: {
        type: Object,
        default: null
        },
        options: {
        type: Object,
        default: null
        }
    },
    mounted () {
        this.renderChart(this.chartdata, {
                scales: {
                    xAxes: [{
                        ticks: {
                            max: 100,
                            min: -100
                        },
                        type: 'linear',
                    }],
                    yAxes: [{
                        display: true,
                        type: 'linear',
                        ticks: {
                            max: 100,
                            min: -100
                        }
                    }]
                },
                elements: {
                    point: {
                        pointStyle: 'circle',
                        radius: 16,
                        backgroundColor: "#dc005a"
                    }
                },
                layout: {
                    padding: {
                        left: 25,
                        right: 25,
                        top: 25,
                        bottom: 25
                    }
                },
                plugins: [{
                        id: "AddLegend",
                        beforeDraw(chart) {
                            console.log(chart)
                        },
                }],
        });
    }
}
</script>

vue-chartjs chart.js vuejs2 vue-component vue.js
2 Answers

Plugins can optionally be registered globally through Chart.plugins.register. You can register any of the hooks provided by the Plugin Core API and provide your custom code. The afterDraw hook for example would have to be registered as follows:

Chart.plugins.register({
  afterDraw: chart => {
    // your code  
  }
});
user_23584090 
    mounted () {
    this.addPlugin({
        id: 'my-plugin',
        afterDraw: function (chart) {
            var ctx = chart.ctx;
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.fillText("ლიბერალური", chart.width/2, chart.height - 25);
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.fillText("ავტორიტარული", chart.width/2, 25);
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.rotate(Math.PI/2);
            ctx.fillText("გეგმიური ეკონომიკა", chart.width/(-2), 25);
            // ctx.save();
            ctx.fillText("თავისუფალი ეკონომიკა", chart.width/(-2), chart.height - 25);
            // ctx.save();
            // ctx.rotate(Math.PI/(-2))
            // ctx.save();
        }
    });
    this.renderChart(this.chartdata, {
            scales: {
                xAxes: [{
                    ticks: {
                        max: 100,
                        min: -100
                    },
                    type: 'linear',
                }],
                yAxes: [{
                    display: true,
                    type: 'linear',
                    ticks: {
                        max: 100,
                        min: -100
                    }
                }]
            },
            elements: {
                point: {
                    pointStyle: 'circle',
                    radius: 16,
                    backgroundColor: "#dc005a"
                }
            },
            layout: {
                padding: {
                    left: 50,
                    right: 50,
                    top: 50,
                    bottom: 50
                }
            },
    });
}
user_141112610
Related