Search code examples
javascriptreactjsjsxchartkick

How to set axis label color using chartkick.js in react?


If I have a column chart component in a react component like so:

import React from "react";
import {ColumnChart} from "react-chartkick";

export function BarChart({data, title, xlabel, ylabel}) {
  const classes = useStyles();
  return (
    <div className={classes.dataVisualisation}>
      <div className={classes.title} >{title}</div>
      <ColumnChart
        data={data}
        xtitle={xlabel}
        ytitle={ylabel}
      />
    </div>
  );
}

How can I specify the color of the text for the labels?


Solution

  • Building off of Keikai's answer I got it to work.

    The property that sets the color of the labels is:

    library > scales > yAxes/xAxes > scaleLabel > fontColor

    import Chartkick, { LineChart } from "react-chartkick";
    import "chart.js";
    
    <LineChart
      data={{ "2017-01-01": 11, "2017-01-02": 6, "2017-01-03": 20 }}
      library={{
        legend: {
          labels: {
            fontColor: "blue"
          }
        },
        scales: {
          xAxes: [
            {
              scaleLabel: { fontColor: "blue" }, // this line sets the label's font to blue
              ticks: { fontColor: "blue" },
              gridLines: { drawBorder: true, color: "blue" }
            }
          ]
        }
      }}
    />