ChartistJS - examples - optimize

by Lio Fleishman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css">
<!DOCTYPE html>
<body>
<div class="chartsContainer">
<div class="travelChart"><span class="graphLabel">Travel</span></div>
<div class="slaChart"><span class="graphLabel">SLA</span></div>
<div class="speChart"><span class="graphLabel">SPE</span></div>
<div class="utilityChart"><span class="graphLabel">Utility</span></div>
</div>
</body>

SCSS

$travelColor: #f6c61e;
$slaColor: #335fc2;
$speColor: #fb79f6;
$utilityColor: #42eb3e;

.chartsContainer {
	
	width: 950px;
	div {
		display: inline-block;
		position: relative;
		.graphLabel {
			font-family: 'helvetica neue';
			position:absolute;
			top: 97%;
    	left: 50%;
		}
	}
}

.travelChart {
	width: 470px;
	height: 295px;

	.ct-series-a {
		
		.ct-line {
			stroke: $travelColor;
		}
		.ct-point {
			stroke: $travelColor;
		}
		.ct-area {
			fill: $travelColor;
		}
	}
}
.slaChart {
	width: 470px;
	height: 295px;
	
		.ct-series-a {
		
		.ct-line {
			stroke: $slaColor;
		}
		.ct-point {
			stroke: $slaColor;
		}
		.ct-area {
			fill: $slaColor;
		}
	}
}
.speChart {
	width: 470px;
	height: 295px;
			.ct-series-a {
		
		.ct-line {
			stroke: $speColor;
		}
		.ct-point {
			stroke: $speColor;
		}
		.ct-area {
			fill: $speColor;
		}
	}
}
.utilityChart {
	width: 470px;
	height: 295px;
			.ct-series-a {
		
		.ct-line {
			stroke: $utilityColor;
		}
		.ct-point {
			stroke: $utilityColor;
		}
		.ct-area {
			fill: $utilityColor;
		}
	}
}

JavaScript

new Chartist.Line('.travelChart', {
  labels: ['', '5m', '10m', '15m', '20m', '25m', '30m', '35m', '40m'],
  series: [
    [0, 2, 3, 4, 5, 6, 7, 5, 3]
  ]
}, {
  low: 0,
	high:15,
  showArea: true,
	  axisY: {
    onlyInteger: true,
    offset: 20
  }
});

new Chartist.Line('.slaChart', {
  labels: ['', '1d', '2d', '3d', '4d', '5d', '6d', '7d', '8d'],
  series: [
    [0, 5, 8, 10, 7, 6, 5, 5, 4]
  ]
}, {
  low: 0,
	high:15,
  showArea: true,
		axisY: {
    	onlyInteger: true,
    	offset: 20
  	}
});

new Chartist.Line('.speChart', {
  labels: ['', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%'],
  series: [
    [0, 2, 2, 3, 4, 5, 6, 4, 3]
  ]
}, {
  low: 0,
	high:15,
  showArea: true,
	  axisY: {
    	onlyInteger: true,
    	offset: 20
  	}
});

new Chartist.Line('.utilityChart', {
  labels: ['', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%'],
  series: [
    [0, 4, 5, 6, 7, 6, 5, 4, 3]
  ]
}, {
  low: 0,
	high:15,
  showArea: true,
		axisY: {
    	onlyInteger: true,
    	offset: 20
  	}
});