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

The command 'create-react-app' is not valid and cannot be recognized as an internal or external command, operable program, or batch file

I've been struggling to set up a React project, as the create-react-app my-app command doesn't seem to be working. Can anyone offer some assistance? Here are the commands I'm using: npm install -g create-react-app create-react-app my-app ...

javascriptnode.jsreactjsreact-nativenpm

What is the method for accessing the Redux store content directly in the console, without using any developer tools

By utilizing React Devtools, I am able to access the store by: $r.store.getState() Is there an alternate method to retrieve the store without using React Devtools? ...

javascriptreactjsreduxreact-devtools

Iterate through a JSON object using JavaScript, with distinct keys but the same object structure

Hello, I'm currently in the process of creating a slider using images sourced from a json file. Here is the json structure that I am working with: { "info":[ { "slide1":[ { "title" ...

javascriptjqueryjson

Searching for different forms of multiple words using regular expressions

I have a value saved in a variable: var myvalue = "hello bye"; var myText = "hellobye is here and hello-bye here and hello.bye" Is there a way to check if different versions of myvalue are present in the text? I am currently using this pattern: hello ...

javascriptregex

Bootstrap columns causing a collision

My website has a problem when viewed on mobile at 320 x 480 resolution. Two columns filled with text collide and mash up the text together. I initially tried without using columns, just "container-clearfix," but that did not resolve the issue. Check out t ...

htmlcsstwitter-bootstrap

A guide on activating Effect in Div using just css

I have tried all the questions and answers related to this topic. Additionally, I attempted to solve related questions but was not successful. Please read my question thoroughly. What I Want: When I click on the click me Div, the second hiddendiv Div i ...

htmlcsstoggle

The disappearance of hashtag (#) when passed as req.query in the backend has been observed

I am facing an issue where a string with a hashtag in the req.query is not being parsed correctly as JSON. http://localhost:3000/link/?items=[{"quantity":1,"_id":"00001","box":"item01","desc":&quo ...

javascriptnode.jsexpress

Vue.js will trigger the updated() method only when a particular array undergoes changes

Working on a chat feature and looking for a way to automatically scroll to the end of the conversation when new messages are added. The current solution involving the updated() function works well, but there's a complication with a vue-timepicker com ...

javascriptvue.jsvuejs2vue-component

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Verifying the functionality of a m3u8 URL with Javascript

I have been using the following code to check if an m3u8 URL is broken or not. I tried with two different URLs, one that is live and one that is offline. However, my javascript function does not alert me whether the file exists or not. There are no errors ...

javascriptjqueryajax

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

I have a form with two submit buttons: one labeled as "SUBMIT" and the other as "SCHEDULE NEXT ROUND". When a user clicks on the "SUBMIT" button, the form values should be stored in the database and redirect to the view page. If they click on the "SCHEDULE ...

javascriptjqueryajaxcodeigniter

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

javascripthtmlcssnested

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Rendering an object as a React child is not allowed (object found with keys {this}). To display multiple children, make sure to use an array instead of an object

Encountering an error: How can I resolve this issue in React? The file relates to the layout I am utilizing Visual Studio export default class Layout extends React.Component { constructor(props) { super(props); this.identify = this.identify.bi ...

javascriptreactjs

A coding algorithm for determining text similarity percentage by calculating the edit distance

I have a good understanding of various edit-distance algorithms in JavaScript, but my goal is to calculate text similarity as a percentage based on them. Can anyone provide guidance on how to implement this feature? ...

javascripttextsimilarity

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

htmlcsspdf

Load an image dynamically within a JavaScript function

I'm currently utilizing a Javascript photo viewer plugin (found here: http://www.photoswipe.com/). My goal is to dynamically update the photos connected to the plugin as the user swipes through different images. To achieve this, I am using a Javascri ...

phpjavascriptjqueryajaxphotoswipe

Combine the text value from a textbox and the value from a checkbox into a single

I'm trying to solve a challenge regarding appending values from text fields (excluding empty ones) and checkboxes in a specific order to form a string. It should be in the format: name|T|F_name|F|F. Once I've created this string, I plan to send i ...

javascriptjquery

Skip over the em tags while extracting the content from the class name using the Parsel selector

Is there a way to extract the contents of a specific class name, including what's inside and after 'em' tags? Refer to the image below for context: My attempted methods and the corresponding outcomes are as follows: Attempt 1: driver = w ...

htmlpython-3.xselenium-webdriverparsel