#### Chart Js

Simple yet flexible JavaScript charting for designers & developers. Please checkout their Full Documentation.

Table of Contents

- Examples
  1. Line Chart
  2. Bar Chart
  3. Pie Chart
  4. Doughnut Chart
  5. Radar Chart
  6. Bubble Chart
  7. Multiple Line Chart
  8. Multiple Bar Chart
  9. Chart with HTML Legends

#### Examples

##### Line Chart

    								<div id="chart-container">
    									<canvas id="LineChart"></canvas>
    								</div>

    								var lineChart = document.getElementById('lineChart').getContext('2d');

    var myLineChart = new Chart(lineChart, {
    	type: 'line',
    	data: {
    		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		datasets: [{
    			label: "Active Users",
    			borderColor: "#1d7af3",
    			pointBorderColor: "#FFF",
    			pointBackgroundColor: "#1d7af3",
    			pointBorderWidth: 2,
    			pointHoverRadius: 4,
    			pointHoverBorderWidth: 1,
    			pointRadius: 4,
    			backgroundColor: 'transparent',
    			fill: true,
    			borderWidth: 2,
    			data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 900]
    		}]
    	},
    	options : {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			position: 'bottom',
    			labels : {
    				padding: 10,
    				fontColor: '#1d7af3',
    			}
    		},
    		tooltips: {
    			bodySpacing: 4,
    			mode:"nearest",
    			intersect: 0,
    			position:"nearest",
    			xPadding:10,
    			yPadding:10,
    			caretPadding:10
    		},
    		layout:{
    			padding:{left:15,right:15,top:15,bottom:15}
    		}
    	}
    });

##### Bar Chart

    	<div id="chart-container">
    		<canvas id="barChart"></canvas>
    	</div>

    var barChart = document.getElementById('barChart').getContext('2d');

    var myBarChart = new Chart(barChart, {
    	type: 'bar',
    	data: {
    		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		datasets : [{
    			label: "Sales",
    			backgroundColor: 'rgb(23, 125, 255)',
    			borderColor: 'rgb(23, 125, 255)',
    			data: [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4],
    		}],
    	},
    	options: {
    		responsive: true,
    		maintainAspectRatio: false,
    		scales: {
    			yAxes: [{
    				ticks: {
    					beginAtZero:true
    				}
    			}]
    		},
    	}
    });

##### Pie Chart

    	<div id="chart-container">
    		<canvas id="pieChart"></canvas>
    	</div>

    var pieChart = document.getElementById('pieChart').getContext('2d');

    var myPieChart = new Chart(pieChart, {
    	type: 'pie',
    	data: {
    		datasets: [{
    			data: [50, 35, 15],
    			backgroundColor :["#1d7af3","#f3545d","#fdaf4b"],
    			borderWidth: 0
    		}],
    		labels: ['New Visitors', 'Subscribers', 'Active Users']
    	},
    	options : {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			position : 'bottom',
    			labels : {
    				fontColor: 'rgb(154, 154, 154)',
    				fontSize: 11,
    				usePointStyle : true,
    				padding: 20
    			}
    		},
    		pieceLabel: {
    			render: 'percentage',
    			fontColor: 'white',
    			fontSize: 14,
    		},
    		tooltips: false,
    		layout: {
    			padding: {
    				left: 20,
    				right: 20,
    				top: 20,
    				bottom: 20
    			}
    		}
    	}
    })

##### Doughnut Chart

    	<div id="chart-container">
    		<canvas id="doughnutChart"></canvas>
    	</div>

    	var doughnutChart = document.getElementById('doughnutChart').getContext('2d');

    var myDoughnutChart = new Chart(doughnutChart, {
    	type: 'doughnut',
    	data: {
    		datasets: [{
    			data: [10, 20, 30],
    			backgroundColor: ['#f3545d','#fdaf4b','#1d7af3']
    		}],

    		labels: [
    		'Red',
    		'Yellow',
    		'Blue'
    		]
    	},
    	options: {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend : {
    			position: 'bottom'
    		},
    		layout: {
    			padding: {
    				left: 20,
    				right: 20,
    				top: 20,
    				bottom: 20
    			}
    		}
    	}
    });

##### Radar Chart

    	<div id="chart-container">
    		<canvas id="radarChart"></canvas>
    	</div>

    var radarChart = document.getElementById('radarChart').getContext('2d');

    var myRadarChart = new Chart(radarChart, {
    	type: 'radar',
    	data: {
    		labels: ['Running', 'Swimming', 'Eating', 'Cycling', 'Jumping'],
    		datasets: [{
    			data: [20, 10, 30, 2, 30],
    			borderColor: '#1d7af3',
    			backgroundColor : 'rgba(29, 122, 243, 0.25)',
    			pointBackgroundColor: "#1d7af3",
    			pointHoverRadius: 4,
    			pointRadius: 3,
    			label: 'Team 1'
    		}, {
    			data: [10, 20, 15, 30, 22],
    			borderColor: '#716aca',
    			backgroundColor: 'rgba(113, 106, 202, 0.25)',
    			pointBackgroundColor: "#716aca",
    			pointHoverRadius: 4,
    			pointRadius: 3,
    			label: 'Team 2'
    		},
    		]
    	},
    	options : {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend : {
    			position: 'bottom'
    		}
    	}
    });

##### Bubble Chart

    	<div id="chart-container">
    		<canvas id="bubbleChart"></canvas>
    	</div>

    var bubbleChart = document.getElementById('bubbleChart').getContext('2d');

    var myBubbleChart = new Chart(bubbleChart,{
    	type: 'bubble',
    	data: {
    		datasets:[{
    			label: "Car",
    			data:[{x:25,y:17,r:25},{x:30,y:25,r:28}, {x:35,y:30,r:8}],
    			backgroundColor:"#716aca"
    		},
    		{
    			label: "Motorcycles",
    			data:[{x:10,y:17,r:20},{x:30,y:10,r:7}, {x:35,y:20,r:10}],
    			backgroundColor:"#1d7af3"
    		}],
    	},
    	options: {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			position: 'bottom'
    		},
    		scales: {
    			yAxes: [{
    				ticks: {
    					beginAtZero:true
    				}
    			}],
    			xAxes: [{
    				ticks: {
    					beginAtZero:true
    				}
    			}]
    		},
    	}
    });

##### Multiple Line Chart

    	<div id="chart-container">
    		<canvas id="multipleLineChart"></canvas>
    	</div>

    var multipleLineChart = document.getElementById('multipleLineChart').getContext('2d');

    var myMultipleLineChart = new Chart(multipleLineChart, {
    	type: 'line',
    	data: {
    		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		datasets: [{
    			label: "Python",
    			borderColor: "#1d7af3",
    			pointBorderColor: "#FFF",
    			pointBackgroundColor: "#1d7af3",
    			pointBorderWidth: 2,
    			pointHoverRadius: 4,
    			pointHoverBorderWidth: 1,
    			pointRadius: 4,
    			backgroundColor: 'transparent',
    			fill: true,
    			borderWidth: 2,
    			data: [30, 45, 45, 68, 69, 90, 100, 158, 177, 200, 245, 256]
    		},{
    			label: "PHP",
    			borderColor: "#59d05d",
    			pointBorderColor: "#FFF",
    			pointBackgroundColor: "#59d05d",
    			pointBorderWidth: 2,
    			pointHoverRadius: 4,
    			pointHoverBorderWidth: 1,
    			pointRadius: 4,
    			backgroundColor: 'transparent',
    			fill: true,
    			borderWidth: 2,
    			data: [10, 20, 55, 75, 80, 48, 59, 55, 23, 107, 60, 87]
    		}, {
    			label: "Ruby",
    			borderColor: "#f3545d",
    			pointBorderColor: "#FFF",
    			pointBackgroundColor: "#f3545d",
    			pointBorderWidth: 2,
    			pointHoverRadius: 4,
    			pointHoverBorderWidth: 1,
    			pointRadius: 4,
    			backgroundColor: 'transparent',
    			fill: true,
    			borderWidth: 2,
    			data: [10, 30, 58, 79, 90, 105, 117, 160, 185, 210, 185, 194]
    		}]
    	},
    	options : {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			position: 'top',
    		},
    		tooltips: {
    			bodySpacing: 4,
    			mode:"nearest",
    			intersect: 0,
    			position:"nearest",
    			xPadding:10,
    			yPadding:10,
    			caretPadding:10
    		},
    		layout:{
    			padding:{left:15,right:15,top:15,bottom:15}
    		}
    	}
    });

##### Multiple Bar Chart

    	<div id="chart-container">
    		<canvas id="multipleBarChart"></canvas>
    	</div>

    var multipleBarChart = document.getElementById('multipleBarChart').getContext('2d');

    var myMultipleBarChart = new Chart(multipleBarChart, {
    	type: 'bar',
    	data: {
    		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		datasets : [{
    			label: "First time visitors",
    			backgroundColor: '#59d05d',
    			borderColor: '#59d05d',
    			data: [95, 100, 112, 101, 144, 159, 178, 156, 188, 190, 210, 245],
    		},{
    			label: "Visitors",
    			backgroundColor: '#fdaf4b',
    			borderColor: '#fdaf4b',
    			data: [145, 256, 244, 233, 210, 279, 287, 253, 287, 299, 312,356],
    		}, {
    			label: "Pageview",
    			backgroundColor: '#177dff',
    			borderColor: '#177dff',
    			data: [185, 279, 273, 287, 234, 312, 322, 286, 301, 320, 346, 399],
    		}],
    	},
    	options: {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			position : 'bottom'
    		},
    		title: {
    			display: true,
    			text: 'Traffic Stats'
    		},
    		tooltips: {
    			mode: 'index',
    			intersect: false
    		},
    		responsive: true,
    		scales: {
    			xAxes: [{
    				stacked: true,
    			}],
    			yAxes: [{
    				stacked: true
    			}]
    		}
    	}
    });

##### Chart with HTML Legends

    	<div id="chart-container">
    		<canvas id="htmlLegendsChart"></canvas>
    	</div>
    	<div id="myChartLegend"></div>

    var htmlLegendsChart = document.getElementById('htmlLegendsChart').getContext('2d');

    // Chart with HTML Legends

    var gradientStroke = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientStroke.addColorStop(0, '#177dff');
    gradientStroke.addColorStop(1, '#80b6f4');

    var gradientFill = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientFill.addColorStop(0, "rgba(23, 125, 255, 0.7)");
    gradientFill.addColorStop(1, "rgba(128, 182, 244, 0.3)");

    var gradientStroke2 = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientStroke2.addColorStop(0, '#f3545d');
    gradientStroke2.addColorStop(1, '#ff8990');

    var gradientFill2 = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientFill2.addColorStop(0, "rgba(243, 84, 93, 0.7)");
    gradientFill2.addColorStop(1, "rgba(255, 137, 144, 0.3)");

    var gradientStroke3 = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientStroke3.addColorStop(0, '#fdaf4b');
    gradientStroke3.addColorStop(1, '#ffc478');

    var gradientFill3 = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
    gradientFill3.addColorStop(0, "rgba(253, 175, 75, 0.7)");
    gradientFill3.addColorStop(1, "rgba(255, 196, 120, 0.3)");

    var myHtmlLegendsChart = new Chart(htmlLegendsChart, {
    	type: 'line',
    	data: {
    		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		datasets: [ {
    			label: "Subscribers",
    			borderColor: gradientStroke2,
    			pointBackgroundColor: gradientStroke2,
    			pointRadius: 0,
    			backgroundColor: gradientFill2,
    			legendColor: '#f3545d',
    			fill: true,
    			borderWidth: 1,
    			data: [154, 184, 175, 203, 210, 231, 240, 278, 252, 312, 320, 374]
    		}, {
    			label: "New Visitors",
    			borderColor: gradientStroke3,
    			pointBackgroundColor: gradientStroke3,
    			pointRadius: 0,
    			backgroundColor: gradientFill3,
    			legendColor: '#fdaf4b',
    			fill: true,
    			borderWidth: 1,
    			data: [256, 230, 245, 287, 240, 250, 230, 295, 331, 431, 456, 521]
    		}, {
    			label: "Active Users",
    			borderColor: gradientStroke,
    			pointBackgroundColor: gradientStroke,
    			pointRadius: 0,
    			backgroundColor: gradientFill,
    			legendColor: '#177dff',
    			fill: true,
    			borderWidth: 1,
    			data: [542, 480, 430, 550, 530, 453, 380, 434, 568, 610, 700, 900]
    		}]
    	},
    	options : {
    		responsive: true,
    		maintainAspectRatio: false,
    		legend: {
    			display: false
    		},
    		tooltips: {
    			bodySpacing: 4,
    			mode:"nearest",
    			intersect: 0,
    			position:"nearest",
    			xPadding:10,
    			yPadding:10,
    			caretPadding:10
    		},
    		layout:{
    			padding:{left:15,right:15,top:15,bottom:15}
    		},
    		scales: {
    			yAxes: [{
    				ticks: {
    					fontColor: "rgba(0,0,0,0.5)",
    					fontStyle: "500",
    					beginAtZero: false,
    					maxTicksLimit: 5,
    					padding: 20
    				},
    				gridLines: {
    					drawTicks: false,
    					display: false
    				}
    			}],
    			xAxes: [{
    				gridLines: {
    					zeroLineColor: "transparent"
    				},
    				ticks: {
    					padding: 20,
    					fontColor: "rgba(0,0,0,0.5)",
    					fontStyle: "500"
    				}
    			}]
    		},
    		legendCallback: function(chart) {
    			var text = [];
    			text.push('');
    			for (var i = 0; i < chart.data.datasets.length; i++) {
    				text.push('');
    				if (chart.data.datasets[i].label) {
    					text.push(chart.data.datasets[i].label);
    				}
    				text.push('');
    			}
    			text.push('');
    			return text.join('');
    		}
    	}
    });

    var myLegendContainer = document.getElementById("myChartLegend");

    // generate HTML legend
    myLegendContainer.innerHTML = myHtmlLegendsChart.generateLegend();

    // bind onClick event to all LI-tags of the legend
    var legendItems = myLegendContainer.getElementsByTagName('li');
    for (var i = 0; i < legendItems.length; i += 1) {
    	legendItems[i].addEventListener("click", legendClickCallback, false);
    }