Vue-chartjs: How access properties of Chart.js ?

[sergeynilov]

Hello!
In my laravel 5.6/vue.js / 2.5 application I use
vue-chartjs libary. As I see vue-chartjs is a wrapper of https://github.com/chartjs/Chart.js and my question is there is a way to use
properties of Chart.js in setting of vue-chartjs objects , like :

            <bar-chart></bar-chart>
...

                Vue.component('bar-chart', {
                    extends: VueCharts.Bar,
                    mounted() {
                        this.renderChart({
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

                            datasets: [
                                {
                                    label: 'GitHub Commits',
                                    backgroundColor: '#f87979',
                                    data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
                                }
                            ]
                        }, { responsive: true, maintainAspectRatio: false, borderWidth: 5, backgroundColor : "green", label : "label Text...", barThickness : 5 })
                    }
                })

I tried in properties above and in Which is the rigth way ?

"chart.js": "^2.7.2",
"vue-chartjs": "^3.3.2",
npm --version : 3.5.2

Thanks!

[apertureless]

Can you give an example of what you are trying to do?
Which properties do you want to access?

You can access the chart instance with this.$data._chart

[sergeynilov]

1) In my piece of code I tried to change borderWidth and backgroundColor ( properties ofChart.js ) of the chart report.
Sorry your link was not clear. Please, some piece of code.

2) also if there is a way by clicking on bar/chart item to trigger event with ID attached to this item ?

Thanks!

[apertureless]

You should check out the official chart.js docs

If you want to define the borderWidth you have to do it in the data object:

http://www.chartjs.org/docs/latest/#creating-a-chart

renderChart() actually need two arguments first the data and second the options.

However you need to check out the docs which configuration can be made inside the data object.

BackgroundColor, BorderColor and many more must be defined in the data object.

1. Check out the Events available in chartjs or the plugin api. You can write your own plugins for it.