Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS.

The situation is a bit unique: the client has their own software rendering the chart, and I don't have access to the original code. After hours of trial and error, I resorted to using globals to find a solution.

Each data point on the chart displays a gray label indicating the value, all currently set at 100%. Is there a way to change the color of these labels without creating a new instance of the chart?

My question: Can we use Chart.defaults.global to modify data point labels?

Thank you in advance! I'm tired of wasting time trying to figure this out. :(

Current Code:

Chart.defaults.global.defaultFontColor = "#fff";
Chart.defaults.global.defaultColor = "#fff";
Chart.defaults.scale.gridLines.color = "#fff";
Chart.defaults.scale.gridLines.zeroLineColor = "#fff";

Snapshot of Current Chart JS Image

By the way, attempting to re-render an instance of the chart hasn't yielded results for me; maybe it could work, but I might be missing something. Here's the HTML code for the pre-rendered chart extracted from Chrome developer tools and formatted for clarity.

<canvas class="tsjschart chartjs-render-monitor" id="ChartKpiTrendLine" data-tschart='{
  "chartID": "ChartKpiTrendLine",
  "tooltipID": "ChartKpiTrendLine_Tooltip",
  "config": {
    "pointLabelSize": 12,
    "pointLabelColor": "#606060",
    ...
  },
...
}' width="803" height="562" style="display: block; height: 450px; width: 643px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default;"></div>
javascripthtmlcsschart.js

Answer №1

By default, Chart.js does not generate data labels on its own. If you are seeing data labels, it's likely that you have installed a plugin like chartjs-plugin-datalabels which is responsible for drawing these labels (refer to this answer for more information).

If using the chartjs-plugin-datalabels, you can customize the color of individual data labels using the scriptable option datalabels.color.

options: {
    plugins: {
      datalabels: {
        ...
        color: ctx => ['red', 'blue', 'green', ...]
        ...

Refer to the Custom Labels sample page to understand how to implement this feature.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

javascriptphpjqueryhtmlmysql

Inability to load a MySQL table using Ajax on the same webpage

I'm facing an issue where I want to load a table from mySql on the same page without getting redirected to another page. The user selects a date range, and upon pressing submit, it should appear in the designated div id tag. However, the functionality ...

javascriptphpjquerymysqlajax

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

Hello, I am using ajax to keep the user on the same page after submitting a form. If successful, I will use ajax load to load another page that displays the quantity of the product. However, I am facing an issue where each subsequent submit increases the q ...

javascriptphpjqueryajaxcodeigniter

Update the ng-model using an Angular service

I am currently working on an Angular application that includes a textarea: <textarea id="log_text_area" readonly>{{logger}}</textarea> In addition, there is a Logger service designed to update this textarea. angular.module('app').f ...

javascriptangularjs

Pushing items to an array is causing the loss of previously added data

Currently, I am working on developing a prototype of a Restaurants application using Angular 8. In this project, I have implemented @Input() to transfer individual restaurant data as an object from the parent component to the RestaurantCardComponent for pr ...

javascriptarraysangularjavascript-objectsangular8

Tips for customizing bootstrap code for registration form to validate against duplicate emails?

The contact_me form utilizes default code to handle success or failure responses from the server. The code calls msend_form.php for communication with the database and always returns true. It allows checking for pre-existing email addresses in the database ...

javascriptphpajaxtwitter-bootstrap-3

Perform a replacement with jQuery.replaceWith() on an input field and refocus in Microsoft Internet Explorer

There exists a script http://gist.github.com/457324 which establishes default text (extracted from the element's title attribute) for empty input[type=text] as well as input[type=password] elements. However, setting default text for password elemen ...

javascriptjqueryjquery-events

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

angularjsangularhtml

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

javascripttypescriptnext.jstailwind-css

Guide on dynamically loading Chart.js onto Gridster upon clicking a button

I am looking to create a dynamic dashboard that can display information with the option to choose different charts for representation. For my project, I integrated the angular-gridster2 package to enable a dynamic grid layout. You can find more details at ...

angularchart.jsangular-gridster2

Combine the remaining bars by stacking the highest one on top in Highchart

Making use of stacking to display the highest value as the longest column/bar, with smaller values being merged within the highest one, can create a more visually appealing stack chart. For example, when looking at Arsenal with values of 14 and 3, ideally ...

javascriptangulartypescripthighcharts

Problem with roles assigned through reactions on Discord

I've been working on a discord bot reaction roles command and everything seems to be going smoothly, except for one issue that I'm facing. After booting up the bot and running the command to create the embed, everything works fine. However, when ...

javascriptnode.jsdiscorddiscord.js

Understanding the concept of hoisting in JavaScript for global variables and functions

I've been curious about hoisting. I understand that if a global function shares the same name as a global variable, the function will overwrite the variable's name. Is this correct? Here is an example code snippet. (function() { console.log ...

javascripthoisting

How to create an AngularJS Accordion with dynamic is-open attribute using ng-repeat

Even though I can get it to work without using ng-repeat, the issue arises when I have a list of elements and is-Open doesn't function properly. 1. It should only open one panel at a time (sometimes it opens all) 2. The value of is-Open should be ...

javascriptangularjsaccordionangular-ui-bootstrap

Modifying data on the fly for a Highcharts series

My chart is currently functioning well with data in the options. However, when I leave the data empty for a series and attempt the following code (in order to change the data based on a click event), it fails to work. Any suggestions on how I can rectify ...

javascriptarrayshighchartsboxplot

The absence of images in WordPress categories is a noticeable issue

So I've been working on my WordPress site. For instance, let's say it's wordpress.com I have a page called sports, and some of those pages are now nested under the page 'summer' Now the url looks like www.wordpress.com/summer/sp ...

phphtmlwordpress

Execute a JavaScript function when an element loaded via Ajax in a Spring MVC framework triggers the onChange event

I currently have a dropdown list with two values and I am looking to enable or disable four components based on the user's selection. If the user picks the first value, the components should be enabled, otherwise they should be disabled. On the main ...

javascriptajaxjspspring-mvconchange

Tips for managing unfinished transactions through Stripe

I have successfully set up a checkout session with Stripe and included a cancel_url as per the documentation. However, I am facing an issue where the cancel_url is only triggered when the user clicks the back button provided by Stripe. What I want to achie ...

javascriptnode.jsangularexpressstripe-payments

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout