Chart.js #6292 test01

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="chart1" width=200 height=200></canvas></div>
<div><canvas id="chart2" width=200 height=200></canvas></div>

CSS

canvas {
  float: left;
}

JavaScript

var chart1 = new Chart(document.getElementById("chart1"), {
  type: 'doughnut',
  data: {
    labels: ['My Data 1','My Data 2','私のデータ 3'],
    datasets: [{
      data: [1,2,3],
      pointStyle: 'circle'
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
    	display: true,
      text: 'fontFamily: \'Arial\''
    },
    tooltips: {
      bodyFontFamily: 'Arial'
    }
  },
	plugins: [{
    afterRender: function(chart) {
			chart.tooltip.handleEvent({
        type: 'mousemove',
        target: chart.canvas,
        clientX: 130 + 8,
        clientY: 60 + 8
      });
      chart.tooltip.transition(1);
      chart.tooltip.draw();
    }
  }]
});

new Chart(document.getElementById("chart2"), {
  type: 'doughnut',
  data: {
    labels: ['My Data 1','My Data 2','私のデータ 3'],
    datasets: [{
      data: [1,2,3],
      pointStyle: 'circle'
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
    	display: true,
      text: 'fontFamily: \'Libre Franklin\''
    },
    tooltips: {
      bodyFontFamily: 'Libre Franklin'
    }
  },
	plugins: [{
    afterRender: function(chart) {
			chart.tooltip.handleEvent({
        type: 'mousemove',
        target: chart.canvas,
        clientX: 130 + 208,
        clientY: 60 + 8
      });
      chart.tooltip.transition(1);
      chart.tooltip.draw();
    }
  }]
});