Topic: Charts Component Limitations?
digitalmanagerguru free asked 5 years ago
Hi there,
when I use mdb-bar-chart component, like this:
<mdb-bar-chart :data="data" :options="barChartOptions" :width="600" :height="300"></mdb-bar-chart>
And then I load the data:
data() {
return {
labels: this.days,
datasets: [
{
data: this.qtys,
yAxisID: "y-axis-2"
},
{
data: this.values1,
type: 'line',
yAxisID: "y-axis-1"
},
{
data: this.values2,
type: 'line',
yAxisID: "y-axis-1"
}
]
};
},
This will create 3 graphics, 1 as bar and 2 as line. All good.
NOW, if I use instead the mdb-line-chart like this:
<mdb-line-chart :data="data" :options="lineChartOptions" :width="600" :height="300"></mdb-line-chart>
And then I do the same thing for data:
data() {
return {
labels: this.days,
datasets: [
{
data: this.qtys,
type: 'bar',
yAxisID: "y-axis-2"
},
{
data: this.values1,
yAxisID: "y-axis-1"
},
{
data: this.values2,
yAxisID: "y-axis-1"
}
]
};
},
(Take note on the type='bar' and type='line')
In my tests mdb-bar-chart accepts mixed types, but mdb-line-chart doesn't. Seems to be probably a bug on that component.
Could you guys take a look? (In case the problem cames from vue-chartjs instead please report to them) Thanks!
Magdalena Dembna staff answered 5 years ago
Hi, it's probably the problem with chart.js - our Vue components are passing options and data to its implementation. I created a task for us to check this issue. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.8.3
- Device: Desktop
- Browser: Chrome
- OS: Win.10
- Provided sample code: No
- Provided link: No