How to change the font-size for the x- and y-axes?

[matthewvolny]

I have been combing the docs looking for a way to change the font-size of the x- and y-axes for a barchart, but don't see an easy answer. I am able to enable labels at the ends of the bars (enableLabels) and resize the font for these (labelsSize), but as I said, no info that I can tell on changing font-size for the axes. Perhaps I am missing something obvious. See this forked codepen for an example of the problem. https://codepen.io/mvolny/pen/XWZrmXR. Code is simple and below Any help is appreciated. Thank you.

const {Bar} = window['britecharts-react'];
const barData = [
{
name: 'Radiating',
value: 2,
},
{
name: 'Opalescent',
value: 4,
},
{
name: 'Shining',
value: 3,
},
{
name: 'Vibrant',
value: 6,
},
{
name: 'Vivid',
value: 6,
},
{
name: 'Brilliant',
value: 1,
},
];
const marginObject = {
left: 100,
right: 40,
top: 40,
bottom: 40,
};

ReactDOM.render(
<Bar
data={barData}
width={400}
isHorizontal={true}
margin={marginObject}
enableLabels={true} //change labels but not x and y
labelsSize={15} //change labels but not x and y
/>,
document.getElementById('app')
);

[Golodhros]

Hi @matthewvolny, thanks for using Britecharts and asking this question!

You mean to update the font size of the category labels on the axes, right? I would advise to use CSS for that, try something like this:

.tick text {
  font-size: 16px !important;
}

[matthewvolny]

@Golodhros Thanks! Worked like a charm. I see now that taking this approach I can change other aspects of the charts styling (see below). I did try targeting the chart elements with css before but somehow missed the "text" element inside of the "tick" class. Yes, cool charting package. And I like the react wrapper. Take care.
(i.e.
.vertical-grid-line {
display: none !important;
}
)

[Golodhros]

Awesome!

Keep an eye on the project, we are adding cool stuff for version 3!!