Donut

by bairog

HTML

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>

<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

JavaScript

var barChartData = {
  labels: ["Напряжены", "Нейтральны", "Воодушевлены", "Не проходили тест"],
  datasets: [{
    backgroundColor: ["#E44269", "#43DEA6", "#ED7506", 'gray'],
    //hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [182, 99, 25, 10]
  }]
};

var optionsBar = {
  legend: {
    labels: {
      fontColor: 'white'
    }
  },
  title: {
    display: true,
    fontStyle: 'normal',
    fontSize: '26',
    fontColor: 'white',
    text: "ЭМОЦИОНАЛЬНОЕ СОСТОЯНИЕ"
  },
  scales: {
    xAxes: [{
      display: false
    }],
    yAxes: [{
      display: false
    }]
  }
};


var ctx = document.getElementById("chart");
ctx.style.backgroundColor = '#0B0E11';
Chart.defaults.global.defaultFontFamily = "'Lato', sans-serif";
Chart.defaults.global.defaultFontStyle = 'normal';
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: barChartData,
  options: optionsBar
});