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:-
Related
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; }
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 am using "wkhtmltopdf" in order to print an html report.
This html contains a pie-chart jquery chart.
This html works perfectly fine.
In the other hand the printting seems to go alright buth when i check the ouput pdf the pie charts leaves some kind of circle around the chart. As you may see in the image.
evidence http://imageshack.com/a/img844/5310/2chv.png
Please,
does somebody knows how to avoid this circle from appering?
Thanks a lot in advance.
I did not solved it but i got and improvemente by changing the donut chart for a pie chart.
And also by reducing the margins between the sections of the chart.
stroke: { color: '#fff', width: 0}
In Kendo Area chart, if you enable/disable the "stack" option, you'll see that the series fill color is semi-transparent, by default. How do I make it a solid color?
PS I do not want to provide a custom series color, because my data is generated remotely, dynamically. I am happy to use the default colors, but since I'm stacking the series, I would like those colors to be solid so that they match the legend colors.
Thanks you in advance.
Just found that the correct setting to control the level of transparency is "opacity", set within seriesDefaults scope:
seriesDefaults: {
type: "area",
stack: true,
opacity: 1
},
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).