Как установить цвет метки оси, используя чарткик. js в реакции?

Question

Если у меня есть компонент столбчатой ​​диаграммы в компоненте реагирования, например, так:

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>
  );
}

Как указать цвет текста для меток?

Answer 1

Построение ответа Кейкай. Я получил его на работу.

Свойство, которое устанавливает цвет меток:

library> scale> 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" }
        }
      ]
    }
  }}
/>

Answer 2

Ну, это довольно глубоко.

Мы можем найти эти вещи внутри документа chartkick

---

library> legend> label> fontColor

библиотека> шкалы> yAxes / xAxes> gridLines (?)> Цвет

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: [
        {
          ticks: { fontColor: "blue" },
          gridLines: { drawBorder: true, color: "blue" }
        }
      ]
    }
  }}
/>