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.
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
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
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
Just put
table.c3-tooltip{
font-size:150px;
} here
change your font size accordingly
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:
clone the git: repo git clone https://github.com/mrjoh3/c3.git
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
then reinstall the package from this folder: install.packages("../c3", repos = NULL, type = "source")
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
I have used this code for gauge graph and it worked.
#graphId svg text { font: bold 15px Arial !important; }
Related
Im following using this example : http://c3js.org/samples/chart_area_stacked.html
I am going to make an area chart for many dataSets and I want to make it so the area chart is not see through. Is there any property I can set or class I can add that will make it so?
You can change the opacity to make the areas opaque by overriding below css rule:-
.c3-area {
opacity: 1 !important;
}
Note:- Markers and tooltip vertical line is not visible fully because of side-effects.
Which looks as shown below:-
Is there any api in dimple to customize the tooltip color and the font type/size? I'm mainly looking for a way to do this for line and bar charts.
If that's not possible then is there an alternate/recommended way to do this via d3?
I tried searching for a way to do this in the dimple docs but couldn't find anything
You can customize with the CSS class .dimple-custom-tooltip-box. Unfortunately, dimple.js styles a lot of the properties (like fill color) in-line on the element after the class, so you'll need to use a !important to override them:
.dimple-custom-tooltip-box {
fill: red !important;
}
Here's an example.
EDITS
The dimple-custom-tooltip-box is missing on the tooltip for line charts. Not sure why, the docs indicate it should be there. Regardless, switch the css to:
rect.dimple-tooltip {
fill: red !important;
}
and it works for both chart types.
Updated example.
I'm using Sphinx to generate documentation which uses reStructured Text as it's markup. However, when I use some inline formatting to make text show up in a fixed width font --no-cache the rendered HTML shows the text in a smaller font.
How do I increase the fixed-width font size in Sphinx / reStructured Text so it matches the normal text font-size?
Answer
With Chris's help I was able to override the default font style in the CSS to increase the fixed-width font size:
Edit conf.py to specify html theme and css file:
html_theme = 'default'
html_style = 'overrides.css'
Next, I created a new css file static/overrides.css with the following contents:
#import url("default.css");
tt {
font-size: 130%;
}
I selected to use 130% because default.css defines this:
div.body p, div.body dd, div.body li {
text-align: justify;
line-height: 130%;
}
And now I get fixed width text matching the regular text in the generated html.
You can edit the CSS stylesheet for whichever theme you are using. For example, for the default theme, you can edit the default.css_t file. Specifically you can specify an increased font-size (for example, use font-size: 1.1em or similar) in the pre rule on line 274.
I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
I am using jQPlot to draw a pie chart.
How can I change the color of the text that appears on each pie slice? There does not appear to be an option to do this.
It is not really a good idea to modify the distributed jqplot CSS file, because that makes for poor maintainability (you have to re-apply your changes if you, or anyone else, ever upgrades).
Instead, I recommend overriding the CSS using CSS Specificity Rules (see the Star Wars Version).
For example, given
<div id='myChart'; style="width:400px;height:300px;background-color:#eedd33">
</div>
You could define a CSS rule
#myChart
{
color: Teal;
}
You don't want to modify the given CSS file as it will modify all uses of the library.
You don't want to create a CSS rule for the entire chart container, as it will also apply the color to any legend or other text that will inherit it.
Instead, just modify the class jqplot uses for its data labels: .jqplot-data-label
Use this:
$('.jqplot-data-label').css("color","white");
This way, only the data labels will change color. All other text such as legend labels will not be changed.
In the end I just modified the top-level jqplot css that affects all text (as I wanted it all the same colour anyway).