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

Javascript – Custom Tailwind CSS colors in chart.js

I have a React application that utilizes Chart.js for rendering charts. I want to customize the colors of labels in the chart using custom colors defined in my Tailwind CSS configuration. I have already set up custom colors in my tailwind.config.js and CSS files, but I’m unsure how to use these colors for my chart labels.

Here are the relevant components in my code:

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-light {
  --labelColor: #000000;
}

.theme-dark {
  --labelColor: #ffffff;
}

tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        labelColor: 'var(--labelColor)',
      },
    },
  },
  plugins: [],
};

chart.jsx:

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const Graph = ({ chartData }) => {
  const options = {
    plugins: {
      legend: {
        display: true,
        labels: {
          usePointStyle: true,
          color: **labelColor**,
        }
      }
    },
    scales: {
      x: {
        ticks: {
          display: true,
          color: **labelColor**,
        }
      },
      y: {
        ticks: {
          display: true,
          color: **labelColor**,
        }
      }
    }
  }

  const datasets = [];

  chartData.forEach((data, index) => {
    datasets.push({
      label: data.name,
      data: data.data,
    });
  });

  const data = {
    labels: chartData[0].labels,
    datasets: datasets,
  }

  return <Bar data={data} options={options} />;
}

export default Graph;

Any suggestions on the most appropriate way to use custom Tailwind colors in this case?

Tags:

2

Answers


  1. 0

    To use custom Tailwind colors in your Chart.js labels, you can follow these steps:

    1. Import the Tailwind CSS class names for your custom colors into your chart.jsx file. For example, if you have a custom color called labelColor defined in your Tailwind configuration, import its class name:
    import 'tailwindcss/dist/tailwind.css'; // Import the Tailwind CSS file
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

const Graph = ({ chartData }) => {
  // Rest of the code
}
    1. Modify the options object in your Graph component to use the custom color class names for your labels and ticks:
    const options = {
  plugins: {
    legend: {
      display: true,
      labels: {
        usePointStyle: true,
        color: 'text-labelColor', // Use the class name for the custom color
      },
    },
  },
  scales: {
    x: {
      ticks: {
        display: true,
        color: 'text-labelColor', // Use the class name for the custom color
      },
    },
    y: {
      ticks: {
        display: true,
        color: 'text-labelColor', // Use the class name for the custom color
      },
    },
  },
};

    Note that we prepend text- to the class name because Tailwind CSS uses the text- prefix for text-related styles.

    1. Update your JSX to apply the Tailwind CSS classes to the component:
    return <Bar data={data} options={options} className="text-labelColor" />;

    Here, we apply the text-labelColor class directly to the Bar component to ensure the custom color is used.

    With these changes, your chart’s labels and ticks should now be styled using the custom colors defined in your Tailwind CSS configuration. Make sure to import the Tailwind CSS file at the beginning of your chart.jsx file to apply the styles correctly.

    Login or Signup to reply.
  2. 0

    I don’t think you will be able to use custom colors that way as tailwind custom colors are used often more with class attributes and then the way you are trying to use them depends on the compatibility of the chart.js modules to accept color as a custom tailwind color variable.
    another way you can approach this is by declaring all of your custom colors in a separate file and exporting them as variables and then you will be able to use them by importing that file.

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

Back To Top
Search