[Idea] Customize axis label color / fonts

[slangdog]

Thanks for the work on this project, wondering if you could add the options to change in axis labels via the options, like you have set the height option, for example:

      var props = this.props;
      var style = {
        height: props.height || "300px",
        lineHeight: props.height || "300px",
        width: props.width || "100%",
        textAlign: "center",
        color: props.axisColor || "#999",
        fontSize: "14px",
        fontFamily: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif"
      };

[ankane]

Hey @brettmeyer, what do you think the interface should look like for that?

[slangdog]

So I had these charts on a dark background and thought if you could pass another parameter into the JSX component to change the axis labels, for example:

<LineChart axisTextColor="#ff0000" data={{"2017-05-13": 2, "2017-05-14": 5, ...}} />

To change these colors:

[stevecastaneda]

Would love this! On a darker background, you can barely see axis and I'm having trouble finding a CSS selector to edit it.

("MH" is the Y axis here, barely seen)

[ankane]

Thanks, you should be able to use the library option for this. I don't think it's common enough to add a Chartkick option.

[stevecastaneda]

What would be the correct configuration for chart.js, to update the axis labels? I've tried <AreaChart data={data} ytitle="YTitle" library={{ labels: { fontColor: "#fff" } }} /> but no luck.

[slangdog]

I attempted this, but wasn't able to change any library options

[stevecastaneda]

Was able to get it to work:

library={{
            legend: {
              labels: {
                fontColor: "#fff"
              }
            },
            scales: {
              yAxes: [
                {
                  ticks: { fontColor: "#fff" },
                  scaleLabel: { fontColor: "#fff" }
                }
              ],
              xAxes: [
                {
                  ticks: { fontColor: "#fff" }
                }
              ]
            }
          }}

[lovato]

@stevecastaneda thanks. With your example, I was able to replace fontFamily, which was my problem.

[ankane]

Cleaning up issues