Change the default font-type of bubble charts

Apps (Frontend)
, ,
1

Dear App-Builders,

I am currently implementing a bubble chart in my dashboard, using the custom component “split-packed-bubble-chart/0.1.1”.

However, I noticed that the default font-type of the bubble chart strongly differs from the standard-element-font (see example below). As a result, the different font-types lead to a very inhomogeneous look and feel.

Is there a way to easily adjust the font-type of the bubble chart to our standard font-type?

Bildschirm­foto 2022-10-28 um 13.20.36
Bildschirm­foto 2022-10-28 um 13.20.36830×456 27.4 KB

2

Can not you change it with global=> styles=> chart?
something like this:

"styles: {{
  "chart": {
    "title": {
      "fontSize": "30px",
      "color": "yellow"
    },
    "subTitle": {
      "fontSize": "30px",
      "color": "yellow"
    },
    "yAxis": {
      "title": {
        "color": "red",
        "fontSize": "26px",
        "fontWeight": "bold",
        "fontFamily": "Helvetica"
      },
      "labels": {
        "color": "blue",
        "fontSize": "24px"
      }
    },
    "xAxis": {
      "title": {
        "color": "red",
        "fontSize": "20px",
        "fontWeight": "bold",
        "fontFamily": "Arial"
      },
      "labels": {
        "color": "green",
        "fontSize": "24px"
      }
    },
    "legend": {
      "color": "green",
      "fontFamily": "sans-serif"
    },
    "dataLabels": {
      "color": "red",
      "fontSize": "14px"
    }
  }
}
}
3

Hi @amanmyrat.abdullayev ,

thank you for your help!
Interestingly, the global styles only seem to affect the standard charts, not the custom component.

I tried the following out:

{
  "styles": {
    "chart": {
      "title": {
        "fontFamily": "Helvetica"
    }
    }
  }
}

And this led to the following change:

Bildschirm­foto 2022-10-28 um 14.38.14
Bildschirm­foto 2022-10-28 um 14.38.14830×456 27.2 KB

4

@tomasito
yes, you are right, I think it is a bug, I also observed the same behavior with split-packed-bubble-chart and stock-chart custom components.
But as a workaround, you can your standard font size/family custom component charts by adjusting the style of each component separately. Would be a little manual work until the bug is fixed :).

For example, if you want to adjust the title of a cc chart:

"title": {
      "style": {
        "fontSize": "26px",
        "fontWeight": "bold",
        "fontFamily": "Helvetica",
        "color": "black"
       }
      "text": "Super Title",
      "align": "left"
    }
1 Like
5

Thank you very much, @amanmyrat.abdullayev!
Just two more questions:
Is the bug ticket already opened? Otherwise I can do it.
And do you happen to know what the standard fontFamily for the standard element is? The goal is to make the look and feel of this bubbleChart as similar to the other elements as possible.

6

Yeah, I have opened a bug ticket and handed it over to Team Fancy: CC-675
You can inspect the chart from the developer console of your browser to see the default fontFamily. As far as I can see it is:

style="color:var(--color-blackish);font-size:24px;font-family:'onedata-sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;fill:var(--color-blackish);

but I usually, set a standard fontFamily, fontSize in global styling for all OD highcharts and use this one in bubbleChart or other custom components.

1 Like
7

Perfect, you solved my problem completely! Thanks a lot!

1 Like