ChartJS Line Chart

Multiple Line Chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<body>
  <div class="chart-wrapper">
    <h3>
    Channel engagement
    </h3>
    <canvas id="chartJSContainer"></canvas>
  </div>
</body>

CSS

.chart-wrapper {
  width: 470px;
  height: 291px;
  padding: 20px;
  box-sizing: border-box;
}

.chart-wrapper h3 {
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: sans-serif;
  color: #999999;
  letter-spacing: 2px;
}

JavaScript

var options = {
  type: 'bar',
  data: {
    labels: ["PRESTASHOP (POS)", "GADOGADO (WEB)", "BIKINIS (WEB)", "MAILCHIMP (EDM)"],
    datasets: [
      {
        data: [100, 100, 0, 66],
        backgroundColor: ["#F40000", "#AEAEAE", "#FABE53", "#4285f4"],
        borderColor: ["#F40000", "#AEAEAE", "#FABE53", "#4285f4"],
        borderWidth: 1
      }
    ]
  },
  options: {
  	responsive: true,
    legend: {
      display: false
    },
    scales: {
      yAxes: [
        {
          ticks: {
            display: false,
            beginAtZero: true,
            suggestedMax: 110
          },
          gridLines: {
            drawTicks: false
          }
        }
      ],
      xAxes: [
        {
          barThickness: 65,
          gridLines: {
            display: false
          },
          ticks: {
            fontStyle: "bold",
            fontSize: 10,
            autoSkip: false
          }
        }
      ]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);