ChartJs Examples

HTML 5 Charting Examples using chartjs library.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<div class="conthttps://jsfiddle.net/erikbartlow/4vyLb57z/#set-as-baseainer">
    <div class="row">
        <div class="col-xs-12 ci-chore-list">
            <canvas id="myChart" width="400" height="400"></canvas>
        </div>
    </div>
</div>

JavaScript

var ctx = document.getElementById("myChart");

var projectData = {
    labels: ["Благовещенск", "Estimation", "Planning", "Awaiting Approval", "Active", "Complete"],
    datasets: [{
        label: "# in Stage",
        data: [250000, 3, 2, 3, 6, 20],
        backgroundColor: [
            'rgba(0,150,214,1)',
            'rgba(0,105,150,1)',
            'rgba(255,129,83, 0.8)',
            'rgba(119,70,119, 1)',
            'rgba(80,145,55, 0.2)',
            'rgba(80,145,55, 1)'
        ],
        borderColor: ['rgba(255,255,255, 1)'],
        borderWidth: 1
    }]
};
var myChart = new Chart(ctx, {
    type: 'radar',
    data: projectData,
    options: {
        title: {
            text: 'Projects by Stage',
            display: true,
            fontSize: 25
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 25,
            bottom: 25
          }
        },
      scale: {
        display: true,
        ticks: {
          fontSize: 30,
          fontColor: '#8a8a89',
          backdropColor: 'transparent',
          tickMarkLength: 10
        },
        pointLabels: {
          fontSize: 15,
          fontColor: '#8a8a89'
        },
      },
        responsive: true,
        legend: {
            display: true,
			position: 'bottom'
        }
    }
});