ChartJS + DataLabels : SandChart

Gotta make it all work.

by phrontisteries

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://chartjs-plugin-datalabels.netlify.com/chartjs-plugin-datalabels.js"></script>
<script src="https://chartjs-plugin-datalabels.netlify.com/samples/utils.js"></script>
<div id="container" class="container">
  <canvas id="myChart"></canvas>
</div>
<div id="actions">
  <button onclick="randomize()">Randomize</button>
  <!--<button onclick="addData(this)">Add Data</button>
	<button onclick="removeData(this)">Remove Data</button>-->
</div>

CSS

#container {
  position: relative;
}

.container {
  border: solid 1px blue;
  height: 500px;
}

.bigger {
  border: solid 1px blue;
  height: 700px;
}

.smaller {
  border: solid 1px blue;
  height: 200px;
}

JavaScript

var SAMPLE_INFO = {
  group: 'Charts',
  name: 'Line',
};
var DATA_COUNT = 8;
Samples.srand(8);


var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      label: "First",
      //data: [10, 20, 30, 50, 0, 30, 5],
      data: Samples.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      backgroundColor: Samples.color(0),
      //backgroundColor: 'rgba(255, 0, 0, .5)',
      //fill: '-1',
    },
    {
      label: "Second",
      //data: [10, 20, 10, 0, 20, 30, 10],
      data: Samples.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      backgroundColor: Samples.color(1),
      //			backgroundColor: 'rgba(0, 255, 0, .5)',
      fill: '-1',
    },
    {
      label: "Third",
      //data: [10, 20, 20, 10, 50, 30, 15],
      data: Samples.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 100
      }),
      backgroundColor: Samples.color(2),
      //backgroundColor: 'rgba(0, 0, 255, .5)',
      fill: '-1',
    },
  ]
};
var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    maintainAspectRatio: false,

    elements: {
      line: {
        tension: 0,
      },
    }, // disables bezier curves
    showLines: true, // disable for all datasets
    animation: {
      duration: 0,
    }, // general animation time
    hover: {
      animationDuration: 0,
    }, // duration of animations when hovering an item
    responsiveAnimationDuration: 0, // animation duration after a resize

    plugins: {
      /*datalabels: {
      	backgroundColor: function(context) {
      		return context.dataset.backgroundColor;
      	},
      	borderRadius: 4,
      	color: 'white',
      	font: {
      		weight: 'bold'
      	},
      	formatter: Math.round
      },*/
      datalabels: {
        borderRadius: 0,
        color: 'black',
        font: {
          weight: 'bold'
        },
       ...