Chart.js #3393

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap" rel="stylesheet">

<div>
  <canvas id="chart"></canvas>
</div>

JavaScript

/*
new Chart(document.getElementById("chart"), {
  type: 'doughnut',
  data: {
    labels: ['Elektronik','Mo','Sp'],
    datasets: [{
      data: [1,2,3],
      pointStyle: 'circle'
    }]
  },
  options: {
    legend: {
      display: true,
      position: 'left',
      labels: {
        usePointStyle: true,
        boxWidth: 20,
        fontSize: 12,
        fontFamily: 'Libre Franklin'
      }
    },
    tooltips: {
      bodyFontFamily: 'Libre Franklin',
    }
  }
});
*/

var ctx = document.getElementById("chart").getContext('2d');
ctx.font = "48px 'Arial'";
ctx.textBaseline = "top";
ctx.strokeText("Hello world g", 0, 0);
ctx.strokeRect(0,0,300,48);

ctx.textBaseline = "middle";
ctx.strokeText("Hello world g", 0, 50+24);
ctx.strokeRect(0,50,300,48);

ctx.textBaseline = "bottom";
ctx.strokeText("Hello world g", 0, 100+48);
ctx.strokeRect(0,100,300,48);