Topic: Combine Bootstrap bar chart and line chart into one.
I would like to combine a Bar chart and line chart into one. so the Line chart could represent the avarage.
Is this possible and if so how?
pbeks pro premium priority answered 6 years ago
Piotr Glejzer staff answered 6 years ago
Hi,
Yes, it possible to mix different types of charts.
Here is an example.
HTML <canvas id="myChart"></canvas>
JavaScript: var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { datasets: [{ label: 'Bar Dataset', data: [10, 20, 30, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], }, { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40], // Changes this dataset to become a line type: 'line' }], labels: ['January', 'February', 'March', 'April'] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });
Is that resolve your problem?
Best regards,
Piotr
pbeks pro premium priority commented 6 years ago
Hi Piotr, That is just what I needed, Thanks this soved my problem. Regards, PieterGarncarczyk commented 5 years ago
Hello,
Could you please add an example with horizontalbar +line chart please?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No