Chart Js Template

Base for Chart JS

by manolenso

HTML

<script src="https://raw.githack.com/nnnick/Chart.js/master/Chart.js"></script>
<canvas id="line"></canvas>
<p class="title">classement de Michel Cymes</p>
<canvas id="bar"></canvas>
<canvas id="line-bar"></canvas>
<canvas id="multi-line-bar"></canvas>

CSS

.title{
    font-size:1.5em;
    font-family:arial;
    padding:20px;
    background-color:#ee69e3;
    text-align:center;
}

JavaScript

//new chart type LineBar - its a bit like bar and line were slammed together at high speed, not pretty, but they are part of each other now
(function(){
	"use strict";

	var root = this,
		Chart = root.Chart,
		helpers = Chart.helpers;


	var defaultConfig = {
		//Function - Whether the current x-axis label should be filtered out, takes in current label and 
		//index, return true to filter out the label return false to keep the label
		labelsFilter : function(label,index){return false;},

		//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
		scaleBeginAtZero : true,

		//Boolean - Whether grid lines are shown across the chart
		scaleShowGridLines : true,

		//String - Colour of the grid lines
		scaleGridLineColor : "rgba(0,0,0,.05)",

		//Number - Width of the grid lines
		scaleGridLineWidth : 1,

		//Boolean - If there is a stroke on each bar
		barShowStroke : true,

		//Number - Pixel width of the bar stroke
		barStrokeWidth : 2,

		//Number - Spacing between each of the X value sets
		barValueSpacing : 5,

		//Number - Spacing between data sets within X values
		barDatasetSpacing : 1,

		//Boolean - Whether the line is curved between points
		bezierCurve : true,

		//Number - Tension of the bezier curve between points
		bezierCurveTension : 0.4,

		//Boolean - Whether to show a dot for each point
		pointDot : true,

		//Number - Radius of each point dot in pixels
		pointDotRadius : 4,

		//Number - Pixel width of point dot stroke
		pointDotStrokeWidth : 1,

		//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
		pointHitDetectionRadius : 20,

		//Boolean - Whether to show a stroke for datasets
		datasetStroke : true,

		//Number - Pixel width of dataset stroke
		datasetStrokeWidth : 2,

		//Boolean - Whether to fill the dataset with a colour
		datasetFill : true,

		//String - A legend template
		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><%...