Skip to Content
avatar image
Former Member

Styling a chart in Design Studio

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Oct 08, 2013 at 09:00 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 09, 2013 at 07:17 AM

    Hi Manuel,

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

    Jeroen

    Add comment
    10|10000 characters needed characters exceeded