Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to remove color in label in Chart.js

How to remove this color from label in Chart.js ?
I’m using primereact, but it’s not difference, because it’s imports Chart.JS inside it.
Looked in docs, but can’t find place where I should write configuration for it.
There is some types of plugins, thats allready inserted into primereact

enter image description here

Tags:

2

Answers


  1. 0

    Like the answer here –> How to remove rectangle box next to the legend text in Chart.js

     legend: {
             labels: {
               boxWidth: 0,
             }
           },

    His codepen (https://codepen.io/jordanwillis/pen/dvReRQ) shows the result. If this is the correct answer please give him an upvote

    Login or Signup to reply.
  2. 0

    you can try this:

    • Use the color property in the ticks or title options to change the color of axis labels.
    const config = {  
  type: 'bar', // Example chart type  
  data: {  
    labels: ['January', 'February', 'March'],  
    datasets: [{  
      label: 'My Dataset',  
      data: [10, 20, 30],  
      backgroundColor: 'rgba(75, 192, 192, 0.2)',  
      borderColor: 'rgba(75, 192, 192, 1)',  
      borderWidth: 1  
    }]  
  },  
  options: {  
    scales: {  
      x: {  
        ticks: {  
          color: 'black', // Change the color of the x-axis labels  
        },  
        title: {  
          display: true,  
          text: 'Months',  
          color: 'blue' // Change the title color of the x-axis  
        }  
      },  
      y: {  
        ticks: {  
          color: 'black', // Change the color of the y-axis labels  
        },  
        title: {  
          display: true,  
          text: 'Values',  
          color: 'blue' // Change the title color of the y-axis  
        }  
      }  
    }  
  }  
};  

const myChart = new Chart(ctx, config);
    • Adjust the color property in the legend.labels options to change or remove the legend labels’ color.
    options: {  
  plugins: {  
    legend: {  
      labels: {  
        color: 'transparent', // Makes the legend labels transparent  
      }  
    }  
  }  
}

    Hope this work

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search