cancel
Showing results for 
Search instead for 
Did you mean: 

Styling a chart in Design Studio

Former Member
0 Kudos

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

Accepted Solutions (0)

Answers (2)

Answers (2)

jeroenvandera
Contributor
0 Kudos

Hi Manuel,

could you show how you did it? i have no experience with SVG so i'm quite curious.

Jeroen

Former Member
0 Kudos

Hi Jeroen,

Thanks

Former Member
0 Kudos

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

Former Member
0 Kudos

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

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute?redirectlocale=en-US&redirectslug=SVG%2FA...

for all other texts you can the normal css attributes.

Hope this helps and works out.

Best regards

Manfred

Former Member
0 Kudos

Thank you for your help.  I have been styling my graphs and it is working farily well.

Manuel

draschke
Active Contributor
0 Kudos

Hi Manfred,

it would be really nice, if you could give us only a simple example.

Do you know, which d3.js version is used?

Best regards,

Dirk

Former Member
0 Kudos

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

draschke
Active Contributor
0 Kudos

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

jeroenvandera
Contributor
0 Kudos

hi Dirk,

try http://d3js.org/ but only if you're ready to spend another night 🙂

draschke
Active Contributor
0 Kudos

Hi Jeroen,

only one night? It has taken me the last three month. (But, it was really an enrichment)

And I'm glad to listen, that Design Studio is using the same library!:)

Br,

Dirk

Former Member
0 Kudos

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

Former Member
0 Kudos

Hi Dirk,

I think you can't see that the components are build with d3, but i know for sure, because i am in the Design STudio SDK Betaprogram.

D3 is really cool

Best regards

Manfred

draschke
Active Contributor
0 Kudos

Congratulations!

draschke
Active Contributor
0 Kudos

Thanks for the link!

But I still miss the information on which d3 version DS is based.

Do we've to include the d3 library in Design Studio? And with which version is DS compatible?

Former Member
0 Kudos

Hi Dirk,

D3 ist already included in Design Studio. Do you have me a hint how to get to know the version number in d3 ? I searched for it, but i have not found anything ?!

As i've heard the CVOM Library will also be included with Release 1.3.

Best regards

Manfred

Former Member
0 Kudos

Hi,

is it possible to rotate the Label/Text?

Regards,

Stefan

Former Member
0 Kudos

Hi Stefan,

Yes, it is possible with the CSS.

Regards,

Adlin

Former Member
0 Kudos

Hi Adlin,

please give me a hint.

I can´t find a solution to do that.

Thanks,

Stefan

Former Member
0 Kudos

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.

Former Member
0 Kudos

Hello  Manual /David

I am  agree with you by CSS, java scripts , we can do that  by creating macros , SLA report using Dashboard , Crystal accurate analysis is best for us in management  . May I help you .

Regards

Asish Mohanty

Former Member
0 Kudos

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

TammyPowlas
Active Contributor
0 Kudos

Zabrina - since this is a closed thread, please create a new discussion with your question.  Thank you