Combine Bootstrap bar chart and line chart into one.


Topic: Combine Bootstrap bar chart and line chart into one.

pbeks pro premium priority asked 6 years ago

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

That solved the problem, Thanks.

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, Pieter

Garncarczyk commented 5 years ago

Hello,

Could you please add an example with horizontalbar +line chart please?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No