11

Can I enlarge the font of c3js charts, such as in axis labels, data labels or categories? I'm interested in setting the general-case font to a larger one.

I searched the docs and couldn't find anything that related to "font" in any way.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
Kludge
  • 2,653
  • 4
  • 20
  • 42

7 Answers7

9

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

will-hart
  • 3,742
  • 2
  • 38
  • 48
Janmejay Shikhare
  • 91
  • 1
  • 2
8

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

aberna
  • 5,594
  • 2
  • 28
  • 33
  • 16
    I tried styling with CSS, but when I increase font-size beyond a certain limit, the text starts hiding due to its parent container limited width. Is there a more flexible way to customize font-size of axis labels or legends? Also, is there a way to add line breaks in labels? I want to break labels after certain word. Any kind of help would be really appreciated. – Smita More Sep 30 '15 at 17:31
2

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

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
1

Just put

table.c3-tooltip{
font-size:150px;
} here

change your font size accordingly

Apurv Kamalapuri
  • 95
  • 9
1

You mentioned data labels size as well (not only axis labels) so the font size of the text that shows the result on the top of a bar chart for instance.

This is called "c3-chart-text" in c3 library. https://c3js.org/reference.html#class-c3-chart-text

I added this to the css file and it solved:

.c3-chart-text text 
{
    font-size: 18px; //change the size of the fonts
}

If you want to automate this behavior then:

  1. clone the git: repo git clone https://github.com/mrjoh3/c3.git

  2. add the formatting ".c3-chart-text text{font-size: 16px}" to the css files:

    ..c3/inst/htmlwidgets/lib/c3-0.6.1/c3.min.css ..c3/inst/htmlwidgets/lib/c3-0.6.7/c3.min.css

  3. then reinstall the package from this folder: install.packages("../c3", repos = NULL, type = "source")

yImI
  • 121
  • 1
  • 5
1

Initially bring all text tags using jquery selector easily

$('text').each(function(){
 $(this).attr("font-size", "14"); //
 $(this).attr("font-weight", "bold");
 $(this).attr("font-family", "Arial, Helvetica, sans-serif");
});

it is more efficiant than write styles while you are going to do export chart as image. Thanks

Unique Unicorns
  • 11
  • 3
1

I have used this code for gauge graph and it worked. #graphId svg text { font: bold 15px Arial !important; }

vaishally garg
  • 11
  • 2