changing font sizes in the charts using css

[Former Member]

I am trying to work with Design Studio 1.1 and cannot get the font sizes in my charts to shrink so that they fit on the chart and are not cut off or not shown completely. I have created a custom css file to work with the charts, but cannot get the size to work.

Thanks,

Amy

[Former Member · Accepted solution]

Hi Amy,

here is some CSS you can put into your custom CSS file:

/* Text under the CHART :: X-Axes */
.v-m-xAxis .v-label {font-size: 10px;}
/* Text on the left side of the CHART :: Y-Axes */
.v-m-yAxis .v-label {font-size: 10px;}
/* Text in the legend on the right side of the CHART */
.v-m-legend .v-label {font-size: 10px;}

Regards,

David

[Former Member · Accepted solution]

Thanks David, but I've hit a snag with that, In Design Studio I can only assign one CSS class to an item, I already have one call .myChartPMR04. How do I incorporate the code into that. I am including the css.

.myChartPMR04

{

border-width: 1px !important;

border-color:#00246B !important;

border-style:solid !important;

background: #E6E9F0 !important;

font-size: 10px;

}

[Former Member · Accepted solution]

Hi Amy,

You do not need to apply any css class to any item when using the code from my previous post. The Chart elements have already all of these classes by default. What the code does when placed into your custom css file is, that it finds the elements which match the used selectors and applies the css style of font size 10px to them automatically, the only condition is that you have linked your custom css file into your bi app correctly.

If you have several charts in your bi app and you want to set the font-size to 10px only in some charts (not all), only in the charts to which you assign your custom css class "myChartPMR04", then the css in your custom css file would look like this:

/* Text X-Axes */

.myChartPMR04 .v-m-xAxis .v-label

{

    font-size: 10px;

}

/* Text Y-Axes */

.myChartPMR04 .v-m-yAxis .v-label

{

    font-size: 10px;

}

/* Text Legend */

.myChartPMR04 .v-m-legend .v-label

{

    font-size: 10px;

}

Or you can group the selectors together to save repetition and space:

.myChartPMR04 .v-m-xAxis .v-label,

.myChartPMR04 .v-m-yAxis .v-label,

.myChartPMR04 .v-m-legend .v-label

{font-size: 10px;}

Kind regards,

David

[Former Member · Accepted solution]

that did the trick, thanks so much

[Former Member · Accepted solution]

This message was moderated.

[Former Member · Accepted solution]

Hi David,

That was very helpful. I had another issue.

My legend is getting cut off and a ... is just put at the end. Is there a way around it?

Regards,

Swaroop M

[Former Member]

Hello David,

thanks for your template - it is working well for font size.

Now my remaining Problem is: how can I influence font color of the Chart.

If I´m trying to enhance your code with

color: #CCCCCC;

or

fill: lightblue;

or

text-decoration-color: red;

it is NOT working

Hope you can give me a good tip

Best regards

Emanuel

[Former Member]

Hi Emanuel,

When you use an own custom css class assigned to your chart, then I would use for example this code to change the font color:

/* Text under the CHART : X-Axes */
.chart-style-1 g.v-m-xAxis g.v-label {fill: blue;}
/* Text on the left side of the CHART : Y-Axes */
.chart-style-1 g.v-m-yAxis g.v-label {fill: green;}
/* Text in the legend on the right side of the CHART */
.chart-style-1 g.v-m-legend g.v-label {fill: orange;}

In the above example the name of the custom css class assigned to the chart is: "chart-style-1".

If you don't use an own custom css class, you can either use for example these css selectors:

/* Text under the CHART : X-Axes */
g.v-m-main g.v-m-xAxis g.v-label {fill: blue;}
/* Text on the left side of the CHART : Y-Axes */
g.v-m-main g.v-m-yAxis g.v-label {fill: green;}
/* Text in the legend on the right side of the CHART */
g.v-m-legends g.v-m-legend g.v-label {fill: orange;}

or these css selectors:

/* Text under the CHART : X-Axes */
g.v-m-xAxis g.v-label.viz-axis-label {fill: blue;}
/* Text on the left side of the CHART : Y-Axes */
g.v-m-yAxis g.v-label.viz-axis-label {fill: green;}
/* Text in the legend on the right side of the CHART */
g.v-m-legend g.v-label.viz-legend-valueLabel {fill: orange;}

Regards,

David

[Former Member]

Hello David,

Thanks a lot - it helped !!

I choose the first Option.

Only thing what took some time was that Design Studio (1.2) didn´t read the changes I made in the CSS file. I copied different file names - desperately restarted the Computer -  until I switched on in -> Tools -> Preferences -> Application Design -> Support Settings -> Tracing -> Activate Runtime Trace.

This setting seems to give the application more time to "think" and hence it´s finding the CSS file.

This is pretty weird but it worked.

If you have a better explanation for this phenomena I would appreciate.

Best regards

Emanuel

[Former Member]

Hi Emanuel,

here you can find useful tips: How to add Custom CSS file?

In general when you clear your browser cache, the changes made in the css file will be visible to you immediately. In IE there is a setting that can be activated in the developer tools (F12 > Cache > Always refresh from server) which when set always forces to load the files from the server - I use this setting.

To see the css changes in Design Studio you can use: CTRL+Right click > Refresh

Regards

David