Line Charts

Line chart - 1

// Line chart 1-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-line-1" width="550" height="250"></canvas>
	</div>
</div>				
						
// Line chart 1-JS
<script>

new Chart($("#chart-line-1"), {
  type: 'line',

// Data

  data: {
	labels: ["January", "February", "March", "April"],
	datasets: [
	  {
		label: "Revenue",
		fill: false,
		borderWidth: 3,
		pointRadius: 0,
		data: [30, 25, 35, 23]
	  }
	]
  },

// Options

  options: {
	legend: {
	  display: false
	},
  }
});	
</script>
						

Line chart - 2

// Line chart 2-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-line-2" width="550" height="250"></canvas>
	</div>
</div>				
						
// Line chart 2-JS
<script>

new Chart($("#chart-line-2"), {
	type: 'line',

	// Data

	data: {
	labels: ["January", "February", "March", "April"],
	datasets: [
	  {
		label: "Revenue",
		fill: false,
		borderWidth: 3,
		pointRadius: 5,
		borderColor: "#9966ff",
		pointBackgroundColor: "#9966ff",
		pointBorderColor: "#9966ff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "#9966ff",
		data: [30, 25, 35, 23]
	  }
	]
	},

	// Options

	options: {
	legend: {
	  display: false
	},
	}
	});
</script>
						

Line chart - 3

// Line chart 3-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-line-3" width="550" height="250"></canvas>
	</div>
</div>				
						
// Line chart 3-JS
<script>

new Chart($("#chart-line-3"), {
  type: 'line',

// Data

  data: {
	labels: ["January", "February", "March", "April"],
	datasets: [
	  {
		label: "Income",
		fill: false,
		backgroundColor: "#36a2eb",
		borderColor: "#36a2eb",
		borderWidth: 3,
		pointRadius: 0,
		data: [30, 25, 35, 23]
	  },
	  {
		label: "Expense",
		fill: false,
		borderColor: "#ff6384",
		backgroundColor: "#ff6384",
		borderWidth: 3,
		pointRadius: 0,
		data: [23, 29, 30, 33]
	  }
	]
  },

// Options

  options: {}
});
			
</script>
						

Line chart - 4

// Line chart 4-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-line-4" width="550" height="250"></canvas>
	</div>
</div>				
						
// Line chart 4-JS
<script>

new Chart($("#chart-line-4"), {
  type: 'line',

// Data

  data: {
	labels: ["January", "February", "March", "April"],
	datasets: [
	  {
		label: "Income",
		fill: false,
		borderWidth: 3,
		pointRadius: 4,
		borderColor: "#36a2eb",
		backgroundColor: "#36a2eb",
		pointBackgroundColor: "#36a2eb",
		pointBorderColor: "#36a2eb",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "#36a2eb",
		data: [30, 25, 35, 23]
	  },
	  {
		label: "Expense",
		fill: false,
		borderWidth: 3,
		pointRadius: 4,
		borderColor: "#ff6384",
		backgroundColor: "#ff6384",
		pointBackgroundColor: "#ff6384",
		pointBorderColor: "#ff6384",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "#ff6384",
		data: [23, 29, 30, 33]
	  }
	]
  },

// Options

  options: {}
});

</script>
						

Area chart - 1

// Area chart 1-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-area-1" width="550" height="250"></canvas>
	</div>
</div>				
						
// Area chart 1-JS
<script>

new Chart($("#chart-area-1"), {
  type: 'line',

// Data

  data: {
	labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Revenue",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderWidth: 0,
		borderColor: "rgba(0,0,0,0)",
		data: [0, 59, 80, 58, 20, 55, 40]
	  }
	]
  },

// Options

  options: {
	legend: {
	  display: false
	},
  }
});
			
</script>
						

Area chart - 2

// Area chart 2-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-area-2" width="550" height="250"></canvas>
	</div>
</div>				
						
// Area chart 2-JS
<script>

new Chart($("#chart-area-2"), {
  type: 'line',

// Data

  data: {
	labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Income",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderColor: "rgba(0,0,0,0)",
		pointBackgroundColor: "rgba(51,202,185,0.5)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(51,202,185,0.5)",
		data: [0, 59, 80, 58, 20, 55, 40]
	  },
	  {
		label: "Expenses",
		backgroundColor: "rgba(243,245,246,0.8)",
		borderColor: "rgba(0,0,0,0)",
		pointBackgroundColor: "rgba(243,245,246,0.8)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(243,245,246,0.8)",
		data: [28, 48, 40, 19, 86, 27, 90]
	  }
	]
  },

// Options

  options: {}
});

</script>
						

Vartical bar chart - 1

//Vartical bar 1-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-vbar-1" width="550" height="300"></canvas>
	</div>
</div>				
						
//Vartical bar 1-JS
<script>

new Chart($("#chart-vbar-1"), {
  type: 'bar',

// Data

  data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Income",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(51,202,185,0.7)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [10, 59, 80, 58, 20, 55, 40]
	  }
	]
  },

// Options

  options: {
	scales: {
	  yAxes: [{
		ticks: {
		  beginAtZero: true
		}
	  }]
	}
  }
});

</script>
						

Vartical bar chart - 2

//Vartical bar  2-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-vbar-2" width="550" height="300"></canvas>
	</div>
</div>				
						
//Vartical bar  2-JS
<script>

new Chart($("#chart-vbar-2"), {
  type: 'bar',

// Data

  data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Income",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(51,202,185,0.7)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [10, 59, 80, 58, 20, 55, 40]
	  },
	  {
		label: "Expenses",
		backgroundColor: "rgba(243,245,246,0.8)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(238,239,240,1)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [28, 48, 40, 19, 86, 27, 90]
	  }
	]
  },

// Options

  options: {
	scales: {
	  yAxes: [{
		ticks: {
		  beginAtZero: true
		}
	  }]
	}
  }
});


</script>
						

Horizontal bar chart - 1

//Horizontal bar  1-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-hbar-1" width="550" height="300"></canvas>
	</div>
</div>				
						
//Horizontal bar  1-JS
<script>

new Chart($("#chart-hbar-1"), {
  type: 'horizontalBar',

// Data

  data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Income",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(51,202,185,0.7)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [10, 59, 80, 58, 20, 55, 40]
	  }
	]
  },

// Options

  options: {
	scales: {
	  xAxes: [{
		ticks: {
		  beginAtZero: true
		}
	  }]
	}
  }
});


</script>
						

Horizontal bar chart - 2

//Horizontal bar  2-HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-hbar-2" width="550" height="300"></canvas>
	</div>
</div>				
						
//Horizontal bar  2-JS
<script>

new Chart($("#chart-hbar-2"), {
  type: 'horizontalBar',

// Data

  data: {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [
	  {
		label: "Income",
		backgroundColor: "rgba(51,202,185,0.5)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(51,202,185,0.7)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [10, 59, 80, 58, 20, 55, 40]
	  },
	  {
		label: "Expenses",
		backgroundColor: "rgba(243,245,246,0.8)",
		borderColor: "rgba(0,0,0,0)",
		hoverBackgroundColor: "rgba(238,239,240,1)",
		hoverBorderColor: "rgba(0,0,0,0)",
		data: [28, 48, 40, 19, 86, 27, 90]
	  }
	]
  },

// Options

  options: {
	scales: {
	  xAxes: [{
		ticks: {
		  beginAtZero: true
		}
	  }]
	}
  }
});			

				

</script>
						


Other Charts

Pie chart

//Pie chart -HTML
<div class="card">
	<div class="card-body">
		<canvas id="chart-pie" class="x-auto" width="350" height="350"></canvas>
	</div>
</div>				
						
//Pie chart -JS
<script>

new Chart($("#chart-pie"), {
  type: 'pie',

// Data

  data: {
	labels: [
	  "Red",
	  "Blue",
	  "Orange"
	],
	datasets: [
	  {
		data: [300, 50, 100],
		backgroundColor: [
		  'rgba(255,99,132,1)',
		  'rgba(54, 162, 235, 1)',
		  'rgba(255, 206, 86, 1)'
		]
	  }]
  },

// Options

  options: {
	responsive: false
  }
});			

</script>
						

Doughnut chart

//Doughnut chart -HTML
<div class="card">
	<div class="card-body">
		<canvas class="mx-auto" id="chart-doughnut" width="350" height="350"></canvas>
	</div>
</div>				
						
//Doughnut chart -JS
<script>

new Chart($("#chart-doughnut"), {
	  type: 'doughnut',

	// Data

	  data: {
		labels: [
		  "Red",
		  "Blue",
		  "Orange"
		],
		datasets: [
		  {
			data: [300, 50, 100],
			backgroundColor: [
			  'rgba(255,99,132,1)',
			  'rgba(54, 162, 235, 1)',
			  'rgba(255, 206, 86, 1)'
			]
		  }]
	  },

	// Options

	  options: {
		responsive: false
	  }
	});			
			
</script>
						

Radar chart

//Radar chart -HTML
<div class="card">
	<div class="card-body">
		<canvas class="mx-auto" id="chart-radar" width="350" height="350"></canvas>
	</div>
</div>				
						
//Radar chart -JS
<script>

new Chart($("#chart-radar"), {
	type: 'radar',

	// Data

	data: {
	labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
	datasets: [
	  {
		label: "Person 1",
		backgroundColor: "rgba(51,202,185,0.7)",
		borderColor: "rgba(0,0,0,0)",
		pointBackgroundColor: "rgba(51,202,185,0.7)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(51,202,185,0.7)",
		data: [65, 59, 90, 81, 56, 55, 40]
	  },
	  {
		label: "Person 2",
		backgroundColor: "rgba(72,176,247,0.7)",
		borderColor: "rgba(0,0,0,0)",
		pointBackgroundColor: "rgba(72,176,247,0.7)",
		pointBorderColor: "#fff",
		pointHoverBackgroundColor: "#fff",
		pointHoverBorderColor: "rgba(72,176,247,0.7)",
		data: [28, 48, 40, 19, 96, 27, 100]
	  }
	]
	},

	// Options

	options: {
	responsive: false,
	legend: {
	  display: false
	}
	}
	});			
	
</script>
						

Polar area chart

//Polar chart -HTML
<div class="card">
	<div class="card-body">
		<canvas class="mx-auto" id="chart-polar" width="350" height="350"></canvas>
	</div>
</div>				
						
//Polar chart -JS
<script>

	new Chart($("#chart-polar"), {
	  type: 'polarArea',

	// Data

	  data: {
		datasets: [{
		  data: [
			11,
			16,
			7,
			3,
			14
		  ],
		  backgroundColor: [
			'rgba(255,99,132,0.95)',
			'rgba(75, 192, 192, 0.95)',
			'rgba(255, 159, 64, 0.95)',
			'rgba(231, 233, 237, 0.95)',
			'rgba(54, 162, 235, 0.95)'
		  ],
		  label: 'My dataset' // for legend
		}],
		labels: [
		  "Red",
		  "Green",
		  "Orange",
		  "Grey",
		  "Blue"
		]
	  },

	// Options

	  options: {
		responsive: false,
		legend: {
		  display: false
		}
	  }
	});			
	
</script>