Points

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>
<div id="test" class="Supervisor-Account-Icon-8">
<img src="https://i.ibb.co/K2Cgzz0/Supervisor-Account-Icon-8.png" alt="Supervisor-Account-Icon-8" border="0" />
</div>

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

CSS

.Supervisor-Account-Icon-8 {
	width: 36px;
	height: 36px;
	background: gray;
	border-color: #a77a23;
	border-style: solid;
}

JavaScript

var data = {
  labels: ["Дата1", "Дата2", "Дата3", "Дата4"],
  datasets: [{
    label: "Напряжённые сотрудники",
    //lineTension: 0,  
    fill: false,  
    borderColor: "#2394DF",
    backgroundColor: "#2394DF",
    //hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [115, 99, 182, 12],
    showLine: false
  },
  {
    label: "Воодушевлённые сотрудники",
    //lineTension: 0,  
    fill: false,  
    borderColor: "#F4EB49",
    backgroundColor: "#F4EB49",
    //hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [15, 102, 73, 54],
    showLine: false
  }]
};

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


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