on 10-08-2013 2:53 AM
I have been looking into this issue for days already and I am hoping someone could help me on this. I have a dashboard with a line chart and I am truying to set the font size and the color for the axis labels as well as the legend fonts. I have so far found no class on the css libraries that I can use for that purpose and using the dev tools on chrome, found that the font size and colors seems to be determined on the HTML code itself rather than coming from a CSS class. Has anyone successfully managed to customize the fonts of charts?
Thanks,
manuel
Hi Manuel,
could you show how you did it? i have no experience with SVG so i'm quite curious.
Jeroen
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Manuel,
Try to put the following css code into your custom css file that you reference in your bi app:
(this is a simple example of setting a different color and bigger font for the axis labels and legend fonts)
/* CHART STYLES CUSTOM CSS */
.chart-style-1 g.v-m-xAxis g.v-label {
fill: green;
font: bold 14px/14px Arial, Helvetica;
}
.chart-style-1 g.v-m-yAxis g.v-label {
fill: blue;
font: bold 14px/14px Arial, Helvetica;
}
.chart-style-1 g.v-m-legend g.v-label {
fill: lightblue;
font: bold 14px/14px Arial, Helvetica;
}
And assign the css class "chart-style-1" to yout chart component.
I used Chrome developer tools to find out the css selectors. I use "fill" instead of "color" on the "g" element.
Kind regards,
David
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi David, hi Manuel
The chart component used in Design Studio used the javascript library d3 and this library uses svg (scalable vector graphics) to render the charts.
For this purpose you have to use the svg attributes
for all other texts you can the normal css attributes.
Hope this helps and works out.
Best regards
Manfred
Hi Dirk,
How simple should this example be ?
HTML Elements use the background attribute in the styles to define a color.
In svg it is the fill attribute.
To get the concrete class or id or tag combination you should use the F12 funtion of your browser.
There are some threads in the Design Studio that already give some classnames - should i refer to these threads ? Or do you have a small wish that i can fullfil for you ?
Best regards
Manfred
Hi Manfred,
thanks for your fast response.
After I read these good news yesterday I was looking for the charts / canvas of design studio. Yes, and as you said it, I found the "customizable" svg.
Thats really great!!!
After that, I tried to find out (almost the whole night), on which point the svg is built with d3, but I couldn't find it! Is that even possible?
Thanks for your help!
Regards,
Dirk
hi Dirk,
try http://d3js.org/ but only if you're ready to spend another night 🙂
Hi Dirk,
this might be helpful:
Design Studio uses SAPUI5's charting API "sap.viz" which is based on the D3 library (source for this info).
For more information also see: UI Development Toolkit for HTML5 Developer Center
Regards
David
Hi Manfred
"To get the concrete class or id or tag combination you should use the F12 funtion of your browser."
I am pressing F12 and I can see the classes, but that is still very tricky. You cannot seem to simply refer to a class. I have tried that. And there is a hierarchical nature to the classes, but I cannot see the logic to apply.
Someone in a post said:
.chart1 g.v-m-legend g.v-label.viz-legend-valueLabel g.v-row path {fill: green;}
Why does that start 'g.v-m-legend' and not something higher up the chain?
Why was 'v-content' not included, or 'v-groups'?
Are you able to provide any simple rules here?
Thanks
al.
Hi,
I am trying to rotate the x-axis labels in the chart using the following code in CSS-class chartsytle without success.
chartstyle g.v-m-xAxis g.v-label {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
How to make it works?
Thanks.
Best regards,
Zabrina
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.