Introduction

ChartJS is one of the most widely used open-source dashboard solutions across many platforms. Leveraging an HTML5 canvas, its great rendering, and responsive performances across browsers make it a developer’s first choice.
This article will explain how to create a simple graph with the below data in simple HTML. We will use the simple dataset below (top 5 longest rivers of the world) to showcase a few of the graphs,
River Length in KMs
Nile 6650
Amazon 6400
Yangtze 6300
Mississippi 6275
Yenisei 5539
Getting Started
We start with a simple skeleton of HTML5. Place just a canvas element with id “myChartContainer”.
Now, ChartJS requires jQuery, Bootstrap and its ChartJS libraries. You can link them from CDN in your HTML page –
At this point, the HTML and the webpage would look like,
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8"/>
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  6. <title>Chart JS Demo</title>
  7. <scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  8. </script>
  9. <scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js">
  10. </script>
  11. <linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
  12. </head>
  13. <body>
  14. <divstyle="width: 100%; text-align: center">
  15. This space is reserved for my Chart JS graphs!
  16. <br>
  17. <br>
  18. <buttononclick="GenerateChart()">Generate Chart
  19. </button>
  20. <br>
  21. <br>
  22. <divstyle="position: relative; height:800px; width:800px">
  23. <canvasid="myChartContainer"style="border:1px solid">
  24. </canvas>
  25. </div>
  26. </body>
  27. </html>
Create Easy Dashboards In HTML Using ChartJS

Adding the ChartJS elements inside your HTML

Now, moving on to the fun part! We have added a button – Generate Chart and have added a function GenerateChart() on its onClick event.
Within the script tags, we will get the context of the canvas where the chart will be rendered and store it in a variable ‘ctx’
To make it easy, we will have a look at the minimal code representation of a dashboard. Below is the entire code – we will have explanations/description of the prime elements after the code,
  1. <!DOCTYPEhtml >
  2. <html >
  3. <head >
  4. <metacharset = "utf-8" / >
  5. <metahttp - equiv = "X-UA-Compatible"
  6. content = "IE=edge" >
  7. <title > Chart JS Demo < /title>
  8. <scripttype = "text/javascript"
  9. src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script> <
  10. scripttype = "text/javascript"
  11. src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" > < /script> <
  12. linkrel = "stylesheet"
  13. href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" / >
  14. <script >
  16. functionGenerateChart() {
  17. myLabels = ['Nile', 'Amazon', 'Yangtze', 'Mississippi', 'Yenisei'];
  18. myData = [6650, 6400, 6300, 6275, 5539];
  20. varctx = document.getElementById('myChartContainer').getContext('2d');
  21. varmyChart = newChart(ctx, {
  22. type: 'horizontalBar', // bar, horizontalBar, pie , line, doughnut, radar, polarArea
  23. data: {
  24. labels: myLabels,
  25. datasets: [{
  26. label: 'Length of River',
  27. data: myData,
  28. backgroundColor: ['green', 'red', 'blue', 'purple', 'black'],
  29. borderWidth: 1,
  30. borderColor: 'black',
  31. hoverBorderWidth: 3,
  32. hoverBorderColor: 'black',
  33. }]
  34. },
  35. options: {
  36. maintainAspectRatio: true,
  37. title: {
  38. display: true,
  39. text: 'Top 5 rivers of the world!',
  40. fontSize: 20
  41. },
  42. legend: {
  43. display: true,
  44. position: 'right',
  45. labels: {
  46. fontColor: '#000',
  47. }
  48. },
  49. tooltips: {
  50. enabled: true
  51. }
  52. }
  53. });
  54. }
  55. </script>
  56. </head>
  57. <body >
  58. This space is reserved
  59. for my Chart JS graphs! < br > < br >
  60. <buttononclick = "GenerateChart()" > Generate Chart < /button><br><br>
  62. <divstyle = "position: relative; height:800px; width:800px" >
  63. <canvasid = "myChartContainer"
  64. style = "border:1px solid" > < /canvas> <
  65. /div>
  66. </body>
  67. </html>
So, this is how ChartJS is instantiated in your HTML DOM,
  1. varctx = document.getElementById('myChartContainer').getContext('2d');
  2. varmyChart = newChart(ctx, {//... the usual chartJS configs...//});
Chart JS relies on 3 major components. The 3 of them are explained below,
Type This indicates the type of graph you need. Acceptable values are – · Bar · horizontalBar · pie · line · doughnut · radar · polarArea
Data This is where the actual data is targeted. It has 2 basic types – · Labels (where all the labels are defined as arrays) · Datasets (where the actual data resides along with how the data is interpreted) Datasets can have the below components · label (label of the graph) · data (the MAIN data) · backgroundColor (color for all the bars, pie sections, etc. Must be an array and should match the number of data sets) · borderWidth (sample value - 1) · borderColor(sample value - red) · hoverBorderWidth (sample value - 2) · hoverBorderColor (sample value - 'black') · hoverBackgroundColor (sample value - 'black')
Options This is where you specify all the configuration options A few configuration values include below - · title · legend · layout · tooltips (enabled – true/false)
So, that pretty much covers the code. Now – time to have a look at the graph!
Create Easy Dashboards In HTML Using ChartJS
Don't like the horizontalBar graph? No problem! Just change the type to “bar” and see the magic. That’s how interactive these graphs are!
Create Easy Dashboards In HTML Using ChartJS