Chartjs-How to get 2 doughnut charts in one chart (chartjs)

by

0👍

You can use 2 canvas on 1 page – see here:

<body>

<table border="1">
  <tr>
    <th>Chart1</th>
    <th>Chart2</th>
  </tr>
  <tr>
    <td>

     <div style="width: 50%">
    <canvas id="canvas1" height="450" width="600"></canvas>
     </div>

    </td>
    <td>

  <div style="width: 50%">
    <canvas id="canvas2" height="450" width="600"></canvas>
  </div>

    </td>
  </tr>
</table>


</body>

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}
var options2 = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}


var ctx = document.getElementById('canvas1').getContext('2d');
new Chart(ctx, options);
var ctx2 = document.getElementById('canvas2').getContext('2d');
new Chart(ctx2, options2);

fiddle

Leave a comment