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