horizontalBar

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: [{
      label: "Воодушевлённые сотрудники",
      backgroundColor: "rgba(68,222,166,1)",
      //hoverBackgroundColor: "rgba(34,139,34,1)",
      data: [177]
    },
    {
      label: "Напряжённые сотрудники",
      backgroundColor: "rgba(218, 65, 102, 1)",
      //hoverBackgroundColor: "rgba(255, 0, 0, 1)",
      data: [170]
    }
  ]
};

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


var ctx = document.getElementById("chart");
ctx.style.backgroundColor = 'rgba(11,14,17,255)';
Chart.defaults.global.defaultFontFamily = "'Lato', sans-serif";
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar
});