Découvrez le cours Chart.js: Cours "Chart.js, le manuel manquant"
Catégories
Uncategorized

barPercentage and categoryPercentage in Chart JS

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
Catégories
Uncategorized

How to create Candlestick 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.

Catégories
Uncategorized

How to Add Custom Annotation Line on Hover in Chart JS

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.

Catégories
Uncategorized

How to Create a Pareto Chart in Chart js

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.

This page covers it in depth: https://www.chartjs3.com/blog/2022/03/07/how-to-add-custom-annotation-line-on-hover-in-chart-js/

Catégories
Uncategorized

What is chart JS used for?

What is Chart js, and what is Chart js used for?

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 (Graphique à barres)
  • Graphique en Courbes
  • Doughnut
  • Pie Chart
  • Radar Chart
  • Polar Area Chart
  • Scatter Chart
  • Graphique de Bulles
  • 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.

Catégories
Uncategorized

Why Chart.js is hard to understand

I am currently in the process of updating the site with more information. The focus will be more on understanding Chart.js so the documentation will be more elaborate and cover more topics of Chart.js from a different angle.

Where to start with Chart.js if you are new?

One of the most important pages will be the homepage at www.chartjs3.com. Core reason is that Chart.js needs to be explained as a journey. It is written with focus of what should I learn if I were new with Chart.js. While not yet fully complete it is now becoming more advance.

The reason why many do not understand Chart.js

The reason why many do not understand Chart.js is because there is no real starting point. The documentation shows pure understanding of drawing a chart but most people struggle with items that are beyond that point.

Drawing a single chart is easy unless you want to create a custom chart, in that case you need to know more deeper topics such as the chartArea. As the default chart like a bar chart or pie chart can be drawn within a few minutes. As the code is easy to grasp and you. Or seconds if you just get the code from the getting started with Chart.js page.

So what is really missing to make it right in Chart.js?

The understanding of 2 parts or at least how they can be combined. They are functions and array manipulation. These two are a common struggle for many as Chart.js does not cover this and of course that is fine because it is understanding Javascript. Which is not the focus of a Chart.js documentation.

This is why I tend to recommend to understand Javascript arrays and have created an entire Série Chart.js Array. With the goal to have many different topics of arrays combined with Chart.js

Catégories
Uncategorized

Guide vidéo Chart JS

Vous avez toujours voulu apprendre Chart JS mais vous aviez besoin de comprendre les instructions de manière plus visuelle ? Ce site web aborde Chart JS avec une approche plus visuelle. L'objectif ici est d'assurer un niveau de compréhension plus élevé.

Chart JS est une merveilleuse bibliothèque JavaScript avec de nombreuses options tout en restant assez compacte. Cela fait de Chart JS un véritable trésor. Il y a beaucoup de possibilités, mais si vous ne comprenez pas comment les utiliser, vous pourriez ne pas les voir. Ce site couvre autant que possible sur Chart JS et toutes ses possibilités. Prêt à explorer ?

fr_FRFrench