// source http://jsbin.com/zukige

index.html

<style id="jsbin-css">
#containter {
  display: flex;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<link href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />  <div id="containter">
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>
    <div id="canvas-holder-2" style="width:40%">
        <canvas id="chart-area-2" />
    </div>
  </div>
<script id="jsbin-javascript">
var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
									1,
                  1,
                  1,
                  1,
                  1
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
          responsive: false,
            legend: {
                display: false
            },
            circumference:1 * Math.PI,
            rotation: -1.5 * Math.PI
        }
    };
    
            var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx, config);
</script>
<script id="jsbin-source-html" type="text/html"><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"><\/script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />  <div id="containter">
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>
    <div id="canvas-holder-2" style="width:40%">
        <canvas id="chart-area-2" />
    </div>
  </div>
</script>

<script id="jsbin-source-css" type="text/css">#containter {
  display: flex;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
									1,
                  1,
                  1,
                  1,
                  1
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
          responsive: false,
            legend: {
                display: false
            },
            circumference:1 * Math.PI,
            rotation: -1.5 * Math.PI
        }
    };
    
            var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx, config);</script>

jsbin.zukige.css

#containter {
  display: flex;
}

jsbin.zukige.js

var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
									1,
                  1,
                  1,
                  1,
                  1
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
          responsive: false,
            legend: {
                display: false
            },
            circumference:1 * Math.PI,
            rotation: -1.5 * Math.PI
        }
    };
    
            var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx, config);