All geek questions in one place

C3js: Is there a way to change the font size?

Can I increase the font of c3js charts, for example, in axis labels, data labels, or categories? I'm interested in installing a font in the general case on a larger one.

I was looking for documents and could not find anything related to the "font" in any way.

+9
source share
5 answers

C3 give some classes for each element when generating. This way you can change the style of the elements using these classes with CSS.

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

A web inspector will be useful for checking classes.

In your case, these labels are:

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

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

+7
source

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 the y axis on the right side use - .c3-axis-y2 text

+5
source

I had to search a bit and also read the c3.css file to get a good idea on how to change the default look.

At the top of my head you will find several classes that you can change in the layout, just include your own CSS file after c3.css replaces it.

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

The CodePen below contains most of the other CSS classes that you need to customize for your C3 diagram to your liking. I use a hybrid histogram / line chart, but am testing on pie and donut charts so that the classes are the same.

C3.js Chart: CodePen

+1
source

Just put

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

change the font size accordingly

0
source

You also mentioned the size of the data labels (not just the axis labels), as well as the font size of the text that shows the result at the top of the histogram.

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

I added this to the CSS file and he decided:

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

If you want to automate this behavior, then:

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

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

    ..c3 / mgn /htmlwidgets/Library/c3-0.6.1/c3.min.css ..c3 / mgn /htmlwidgets/Library/c3-0.6.7/c3.min.css

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

0
source

Source: https://habr.com/ru/post/982332/

More articles:


All Articles