Comment ajouter une étiquette de données uniquement au dernier point de données d'un graphique linéaire | Chart.js

Dans cette vidéo, nous aborderons l'une des questions posées par les spectateurs, à savoir comment ajouter une étiquette de données uniquement au dernier point de données d'un graphique linéaire dans Chart.js.

Il s'agit d'une excellente question, car les étiquettes de données, qui font partie du chartjs-plugin-datalabels, peuvent parfois submerger l'utilisateur. Avoir trop de données n'est pas la solution, comme nous le savons tous, "moins, c'est plus". Cette vidéo explique comment afficher uniquement le dernier point de données dans les étiquettes de données.

The Chartjs Datalabels Plugin

Showing the labels directly on a line chart or any type of chart can be done with the Chartjs Datalabels Plugin [chartjs-datalabels-plugin]. We have an entire series covering all the possible options of this datalabels plugin. Interested to know more check out the Chartjs Datalabels Plugin Series.

Chart.js Point Labels

Souvent, les étiquettes de données sont appelées étiquettes de points. Cependant, elles sont exactement les mêmes mais sont généralement utilisées sur les graphiques linéaires où chaque point de données est associé à un point. La grande partie de tout cela est que le plugin Chart.js datalabels prend en charge les graphiques linéaires, les graphiques à barres et les graphiques circulaires.

Afficher la valeur sur la barre dans Chart JS

Le plugin Datalabels vous permet d'ajouter des valeurs sur chaque barre avec facilité. Par défaut, il est déjà joliment centré dans la barre une fois enregistré. Pour enregistrer le plugin Datalabels, nous devrons utiliser l'objet ChartDataLabels. Pour comprendre comment ajouter le plugin Datalabels et l'objet ChartDataLabels, consultez cette page : https://www.chartjs3.com/docs/chart/chart-js-datalabels-plugin/1-how-to-add-chartjs-plugin-datalabels-to-chart-js/

Changer la couleur des étiquettes de données dans Chart JS

Ce plugin vous permet d'ajouter vos propres couleurs aux étiquettes pour les faire ressortir. Les options de changement de police et de couleur de police sont bien intégrées. Cette page contient une vidéo expliquant comment changer la famille de polices et les couleurs de police dans le plugin Datalabels : https://www.chartjs3.com/docs/chart/chart-js-datalabels-plugin/9-color-and-font-option-in-chartjs-plugin-datalabels-in-chart-js/

Étiquettes de données personnalisées dans Chart JS

Parfois, vous souhaitez ajouter plus d'informations ou de données que d'étiquettes. Pour personnaliser les étiquettes de données avec des informations supplémentaires, nous devons utiliser l'option de formatage disponible dans le plugin Datalabels.

Options de formatage dans Chart JS

Comprenez ceci, consultez cette page: https://www.chartjs3.com/docs/chart/chart-js-datalabels-plugin/14-formatter-options-in-chartjs-plugin-datalabels-in-chart-js/

Masquer les étiquettes de données dans Chart JS

Tous les Chartjs Plugin Datalabels une fois activés ou enregistrés s'appliqueront à tous les points de données, barres ou tranches de tarte. C'est bien pour beaucoup, mais souvent vous voudrez peut-être masquer certains points de données. La vidéo ci-dessus vous montre exactement comment contrôler les points de données spécifiques.

Masquer les étiquettes de données pour un jeu de données spécifique dans Chart JS

Souvent, si votre graphique comporte plusieurs jeux de données, vous voudrez peut-être masquer les étiquettes de données ou les étiquettes de points de données de jeux de données spécifiques. Cela est tout à fait possible mais nécessite une compréhension plus approfondie de l'option de formateur dans le plug-in Datalabels. Cette vidéo explique exactement comment masquer les étiquettes de données pour un jeu de données spécifique, qui est un graphique en courbes tout en l'affichant sur le graphique à barres dans le graphique combo à barres de Chart.js.

Chart.js Boxplot

Un autre type de graphique unique est le graphique en boîte. Bien que cela ne soit pas l'objet de cette page, il arrive souvent qu'un graphique en boîte ait besoin d'afficher plusieurs points de données. Cependant, ils devraient être inclus dans l'info-bulle. Cette vidéo expliquera comment créer un graphique en boîte dans Chart.js.

Comment créer un graphique en boîte dans Chart JS