Bar

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 data = {
  labels: ["Новые", "Опытные"],
  datasets: [{
    backgroundColor: ["#2394DF", "#F4EB49"],
    //hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [115, 99]
  }]
};

var options = {
  legend: false,
  title: {
    display: true,
    //fontFamily: "'Lato', sans-serif",
    fontStyle: 'normal',
    fontSize: '26',
    fontColor: 'white',
    text: "СООТНОШЕНИЕ НОВЫХ/ОПЫТНЫХ СОТРУДНИКОВ"
  },
  scales: {
    xAxes: [{
      stacked: true,
      display: false
    }],
    yAxes: [{
      stacked: true,
      display: false
    }]
  }
};


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