c3js: Is there a way to change font size?

Use the following two classes.

.c3-axis-y text 
{
  font-size: 15px; //change the size of the fonts
}

.c3-axis-x text 
{
  font-size: 15px; //change the size of the fonts
}

For a y axis on the right hand side use - .c3-axis-y2 text

I had to search around a bit as well and read the c3.css file to get a good understanding of how to change the default look.

Off the top of my head here is some classes you may want to change the layout of, just make sure to include your own CSS file after c3.css to override it.

.c3-legend-item
.c3-tooltip th
.c3-tooltip td

The CodePen below includes most of other CSS classes you'll need to customize your C3 chart to your liking. I'ts a bar chart/line chart hybrid but tested on pie and donut charts so the classes are the same.

C3.js Chart: CodePen

C3 give some classes for each element when generating. So, you can change the style of the elements by using those classes with CSS.

Example: 1. Line style The lines have c3-line-[id] class, so this class can be used to define the style in css.

A Web Inspector would be useful to check classes.

In your case labels are:

• c3-legend-item-event
• tick
• ....

From C3js documentation: http://c3js.org/gettingstarted.html