In Chart.js we often have to draw charts with specific dates. If you are creating a stock market chart where your chart has data for the weekdays only you will have missing or static data the weekends and public holidays. This might be undesirable and you might want to remove those specific dates to keep the chart clean.
The video below will show you visually the difference between scale type time and timeseries.
Understanding difference between time and timeseries in Chart JS
Time in Chart JS
The type of time is this case not useful. As this will calculate the space based on the difference of the timeframe. For example if the next datapoint would be a week away from the current datapoint it will calculate 7 segments of space. This creates a big gap in our chart. See the gap in the x scales below.
Time in Chart JS
Time Series in Chart JS
Chart.js has a nice build in feature to answer this specific matter which is the time series. In it will set every date based on equidistant.
Equidistant in time series Chart JS
Equidistant is derived from the words ‘equal’ and ‘distant’. In other words, it will set every next datapoint on equal distant no matter the the timeframe between the years.
Creating a sales funnel chart in Chart JS is possible. However, it requires some advance plugin customization to get it working. What we need to understand is how to draw custom shapes which converts the bars into a funnel.
If you are ready for some advance level Chart.js. In that case this video will be a great challenge. It will track the sales funnel and every step of the funnel, the funnel shrinks based on the values of dataset.
How to Create a Sales Funnel Chart in Chart JS
Breaking Down the Sales Funnel Chart in Chart JS
The Sales Funnel Chart consist of multiple items as we will maximize all our Chart.js knowledge to create this unique chart. If you look closely you will notice that the chart is in essence a horizontal bar chart. However, it does not start at the very left but keeps it position to the center of the X-axis. This is due to the floating bar structure that we use.
Chart.js has a floating bar structure which allows bars to float in mid air instead of being pulled to the very beginning of the chart. In this case it is to the very left. The floating bar structure has a different data structure that we use.
Once we are done with that we can remove all the gridlines to keep the sales funnel nice and clear. Once everything is cleared we can start drawing this funnel or grey cone shaped element. The cone or funnel shaped elements are independent of the bars. But, they create a visual that makes it look like it is all one single shape.
The cone shape coordinates are crucial and for this we must know how to draw shapes in the canvas API. Once you understand how to connect each line to create a shape the element will color be easy.
Finally we will need to add text on the bar it self. As each bar or step of the funnel represents a certain value. Once that is done your Sales Funnel Chart in Chart.js is good to go.
In this video we will explore how to draw text in the center of a doughnut chart in Chart.js. However it will only be triggered once we hover on a specific doughnut slice.
Let’s explore how to add data label only to the last data point in Chart js 3. To do this we will need the use of the chartjs-plugin-datalabels or also known as the chartjs data labels plugin.
In Chartjs, chart.js or chart js you can do many things but for this we will use a plugin as this will extend the functionality of chart.js.
The video shows how
The video shows a nice breakdown of how to achieve this.
How to add data label only to the last data point of a line chart | Chart.js
With the use of the Chartjs Datalabels Plugin you can easily add datalabels. However, now we want to make sure we need to filter out all the other datalabels except the one that we want to display.
Video Summary:
To achieve this we must do a few steps.
Create the chart js structure
Register the [chartjs-plugin-datalabels] or the Data labels plugin in our chart object.
Filter out with a callback the right dataset and data index or data point that matches with the data label.
In Chart.js we can connect with a CSV file. Using a CSV file which is basically a table file with data commonly exported from an Excel file. Being able to read these kind of files with Chart js gives you the ability to make systems and dashboards from Excel data.
Connect a CSV File with Fetch in Chart.js
Chart.js is a Javascript library and this means it needs to read all data in a so called format. That means we need to parse the CSV data to make it readable for JavaScript. This video shows you exactly how.
How to connect a CSV File with Fetch in Chart.js
What is Parsing in Javascript?
Perhaps you might wonder what this does. To understand parsing we need to know what the word ‘to parse’ means. To parse means to make something readable for. In this case it is for JavaScript.
In computer language CSV files is considered a different language that cannot be understood by JavaScript. So parsing is basically translating the CSV data into a JavaScript readable version. Once we did that we can start to use that data.
What is Fetching?
Fetching in JavaScript can be seen as throwing a bone and ordering a pet dog to get the bone. In this case the bone is the metaphor for the data. So we are getting data and ordering to get specific data back that we want. Fetching always works based another file that contains data. In video we are using a CSV file.
However it is not restricted to a CSV file. It could be any acceptable file that we can parse into readable Javascript data.
One of the more complicated matters is the barPercentage and categoryPercentage in Chart JS. While both are very essential they might be confusing.
The Chart.js documentation does explain it in a closely visual manner it is not clear for most.
barPercentage vs categoryPercentage in Chart JS
This video will show you how the barPercentage and categoryPercentage work. Specifically how they effect your chart visually.
barPercentage vs categoryPercentage in Chart JS
What is the barPercentage?
The barPercentage is a feature that controls the width of the bar measured in percentage. The default is 0.9 this means that the bar thickness or with is 90% of the assigned space for the bar.
The assigned space depends on the categoryPercentage.
What is the categoryPercentage?
The categoryPercentage is based on the axis. In a vertical bar chart the category is on the x-axis. In horizontal bar chart it is place on the y-axis.
However, the categoryPercentage is the space between the ticks. By default this value is set on 0.8 which indicates 80% of the space between the ticks.
So how is the width calculated combining barPercentage and categoryPercentage?
Let’s look at the barPercentage which is by default 0.9 or 90%. This means that 90% of the categoryPercentage assign width. However, the categoryPercentage was set on 0.8 or 80%.
Imagine is the full categoryPercentage in pixels is 100. In that case we need to calculate 100 * 0.8 = 80 pixels is the categoryPercentage.
From that 80 pixels we will take now the barPercentage of 0.9. Which would mean 80 pixels * 90% = 72 pixels is the true width of the bar.
Make sure to watch the video. As a visual representation is easier in understanding this and how to affects your bar. With this we could make full width bars like a Histogram Chart in Chart js.
Full Width Bar Chart in Chart JS
Once you understand that both the categoryPercentage and the barPercentage are crucial we can easily create a full width bar chart in Chart.js.
We want to make sure the bar will be covering the full segment on which the base of the chart rests. This is how we can control the bar thickness in a bar chart. The video shows exactly how.
How To Create Full Width Bar Chart in Chart JS
How To Create Full Width Bar Chart in Chart JS
How To Increase Bar Thickness in Horizontal Bar Chart in Chart JS
Once you understand how the barPercentage and categoryPercentage works you will also know how to apply the same for a horizontal bar chart.
To do that we do exactly the same and add another step to make sure we swap the category axis from the X axis to the Y axis. This is how we can control the bar thickness in a horizontal bar chart.
How To Increase Bar Thickness in Horizontal Bar Chart in Chart JS
How to Increase Space Between Bars in Bar Chart in Chart JS
So far we have covered how to increase the bar thickness but we can also narrow the bars and add additional space between each bar in Chart JS.
For that we will need to use the barPercentage and categoryPercentage but instead of increasing the value we will now lower or decrease the value. This video show exactly how.
How to Increase Space Between Bars in Bar Chart in Chart JS
In Chart.js we can create a candlestick chart. A candlestick chart is in essense a bar floating bar chart with a line at the top and bottom. It looks like a candle due to these lines.
Candlestick Chart with Chartjs Financial Plugin
To create a candlestick chart we need to use a specific Chart.js plugin. This plugin is called Chartjs Financial plugin or [chartjs-financial-plugin].
And it enhances the bar chart with additional datapoints which are essential for a candlestick chart. Which are the open, high, low and close (OHLC) data points. The video will show you exactly how this works.
Candlestick Chart in Chart JS 3 | chartjs-financial-plugin
Unique features of Candlestick Chart
A candlestick chart has some unique features that Chart.js floating bar chart does not do by default. It enhances the chart with multiple data points. The open, high, low and close (OHLC) values which are 4 separate data points for each candlestick.
The open and close values defines the bar height. While the high and low values defines the length of the so called candle wick or line at the upper and lower part of the bar. The high is associated with the upper line while the low is connected with the lower line.
Secondly, the color coding of the candlestick. The color of the candlestick depends on the open and close value of that specific day.
If the open value is lower and closes higher it is green. Which means that the stock has increased in value. If the open value is higher compare to the closing value, it becomes red. This indicates that the value has declined.
How to add custom annotation line on hover in Chart JS
How to add a custom annotation line on hover in Chart js. An annotation line is a line usually vertical or horizontal line that highlights a specific point. Usually to indicate an important event on the chart or precisely see the exact data point value on the x-axis.
Video of how to add custom annotation line on hover in Chart JS
In Chart.js we create our own annotation line which is trigger on an hover effect. This video will show you how to make a line that is dashed / dotted at the top and a solid line once it hits the data point to bottom.
How to Add Custom Annotation Line on Hover in Chart JS
How to create a custom annotation line in Chart js
The video shows you exactly how to do it code wise. However, to understand the logic behind it. Chart.js is written in Javascript and drawn in the Canvas API. With the Canvas API we can truly draw anything on the Chart.js chartArea.
With a custom plugin we will draw the lines and get the matching coordinates on the x axis and y axis. Which is being triggered only once we hover on top of the specific data point.
For the hover triggering effect we will be using the structure similar to the tooltip and is part of the Chart.js API. As this does exactly the same as what we need. Watch the video to fully grasp the steps as this is a quite advance topic.
With Chart.js we can create a Pareto Chart. The Pareto Chart is well known due to the 80/20 rule. It is stated that 80% of all results derives from 20% of the cause.
Commonly in manufacturing this is being use to measure production mistakes. It tracks each item and analyzes the percentage of mistakes that are made per step.
How to make a Pareto Chart in Chart js
This video will show you exactly how to make a Pareto Chart in Chart js. It will start with a default code which you can find on the Chart.js Getting Started Page.
How to Create a Pareto Chart in Chart js
Pareto Chart is a bar line combo chart
While the Pareto Chart is bar line combo chart it does has some modifications. We are required to show the bar values in absolutes. While the line which is applied to the second Y-axis, measures each step and is displayed in cumulative percentages. In other words the percentage value is added up with each step.
This requires a more complex level of array manipulation and show the scale in percentage values on the right side. This must be fully automated so the values will recalculate if the data is changing.
This requires a more complex level of array manipulation and show the scale in percentage values on the right side. This must be fully automated so the values will recalculate if the data is changing.
Let’s break down all the essential parts of a Chart JS Pareto Chart.
We will have a mixed chart which consist of a line chart and bar chart combination. Chart.js allow us to create combo charts. Secondly, we need to make sure the line will be visible and draw on top the bar chart.
Chart JS Mixed Chart
To create a mixed chart or oftenly referred to a combo bar line chart in Chart js. This video covers it nicely and also shows how to keep the line always on top of the bars.
How to Place Line On Top in Combo Bar Chart in Chart js
Chart JS Second Y Axis
Chart.js allows you at add a second y axis or y scale. We will need this because we will conver the second y axis into a percentage scale which is devoted to the line chart. The line chart will use the values from the bars or Pareto Chart and convert it into percentages. This video explains the process for how to add the second y axis specifically:
How to Add Second Y-Axis in Chart js
Add Annotations in Chart JS
A special add on option is annotations in Chart JS. With annotation you could add lines to highlight specific parts of the Pareto Chart in Chart.js. The upper video does not truly show you how to do this but this page shows you how to add annotation lines or often referred to as arbitrary lines in Chart.js.
Chart js helps you draw charts and visualize data in a quick and easy manner with Javascript. Chart js is an open-source javascript library and is a well-known chart drawing library in Javascript. It comes with 8 different types of charts such as bar and line.
What are the 8 charts that Chart js enable you to draw?
Chart js has 8 different chart type that are working right out of the box. The 8 different chart that Chart js allows you to draw are:
Bar Chart
Line Chart
Doughnut
Pie Chart
Radar Chart
Polar Area Chart
Scatter Chart
Bubble Chart
Mixed Chart Types
Besides the 8 chart options it allows a mixture of existing chart types and combining them together. However, Chart js is not very restricting as it allows even more chart types one you understand how to draw in the canvas API.
If you are familiar with the canvas API you can quickly customize chart js and create unique chart types.
English 
Spanish 
French 
Vietnamese