Mixed chart

Made with Chart.js library http://www.chartjs.org/

by Ju Oliveira

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div class="chart-container" style="position: relative; height:80%; width:85%">
    <canvas id="chart"></canvas>
    <div id="chart-legends"></div>
</div>

CSS

.chart-container {
  padding: 20px; }

#chart-legends {
  text-align: center; }

JavaScript

var chart = new Chart(document.getElementById("chart"),
{
	type: "bar",
  data: {
  		labels: ["Nov 2017", "Dez 2017", "Jan 2018", "Fev 2018"],
    	datasets: [
        {
        	label: "Utilizados",
          data: [10.81, 11.03, 12.35, 12.51],
          type: "line",
          fill: false,
          borderColor: "rgb(33, 153, 232)",
          backgroundColor: "rgb(252, 252, 252)"
        },
        {
          label: "Adquiridos",
          data: [13, 13, 14, 14],
          borderColor: "rgb(203, 228, 245)",
          backgroundColor: "rgba(203, 228, 245, 0.8)"
        }]
  },
  
  options: {
  		scales: {
      		xAxes: [{ gridLines: { display: false },
          					categoryPercentage: 1.0,
            				barPercentage: 1.0,
                    scaleLabel: { 
                    		display: true, 
                        labelString: "Mês",
                        fontStyle: "bold"
                    }
          			 }],
      		yAxes: [{ ticks: { beginAtZero: true,
          									 callback: function(value, index, values) {
                                return value + " GB"; }
                    },
          					gridLines: { borderDash: [2, 5] }
          			 }]
      },
      
      title: {
          display: true,
        	text: ["Storage Mensal", "ABC - Azevedo Rodrigues, Batalha, Costa e Associados, SROC, LDA."]
      },
      
      legend: {
          display: false
            	//filter: function(legendItem, chart) {
              		//return legendItem.index;
                	//if(legendItem.text === "Utilizados"){ return { fontColor: "rgb(255, 99, 132)" } }
              //}
              //generateLabels: function(chart){
              //}
      },
      
      legendCallback: function(chart) {
      		var text = [];
          //text.push('<div>');
          
          for (var i=0; i < chart.data.datasets.length; i++) {
            //console.log(chart.data.datasets[i]); // see what's inside the obj.
           ...