Some questions as for vue-chartjs - vue-chartjs

Question

In Laravel 5.6 / vuejs 2.5 application I use vue-chartjs, but my charts looks like :
https://imgur.com/a/ru1dXlm
I want some more:
having several items(artists in my case) I want to see them half-transparent, just as in first example here http://demo.vue-chartjs.org/
having points with values shown as in first example at link above
I need to see all labels in x-direction( I fill labels parameter ) for here
If there source code of demo examples of link above > I searched and did not find...
Thanks!

Answer 1

Well, you should find everything you need in the documentation of chart.js and vue-chart.js
http://www.chartjs.org/docs/latest/
http://vue-chartjs.org/#/home?id=resources
You can add rgb values as a background color to make them transparent.
You can also use gradients as its just a canvas element.
Here is a tutorial:
https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a?source=user_profile---------5----------------
Here is the source code of the vue-chartjs demo page:
https://github.com/apertureless/vue-chartjs-demo
(It's a bit outdated as with v3 the creation of chart components changed a bit)
It seems you did not filled the labels correctly.
{
labels: ['Here', 'are', 'your', 'x-axis', 'labels'],
datasets: [
{
label: 'artist 1',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
data: [0, 1, 2, 3, 4],
},
{
label: 'artist 2',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
data: [0, 1, 2, 3, 4],
},
],
}