Changing font size of d3pie charts

Help
1

As mentioned in the title, I wanted to ask if it is possible to use attributes to change the font size of d3pie charts.
Also I would like to remove the header (e.g. Apps CPU Time (100% = 1 core) (apps.cpu)).

Best regards
e_mps

2

Hello @e_mps ,

You can customize all the custom dashboard charts by passing data attributes, for reference you can check the code here - unfortunately, the documentation is not covering all the options for all the chart libraries available.

Now, regarding your 2 questions:

I will start with the second one about the title, you can set data- d3pie-title="" to set it to empty, thus remove it.

Changing font sizes in general, can be done for multiple elements.

  • change title font-size with data-d3pie-title-fontsize (code)
  • change subtitle font-size with data-d3pie-subtitle-fontsize (code)
  • change footer label font-size with data-d3pie-footer-fontsize (code)
  • change legend labels font-sizes with
    data-d3pie-labels-mainLabel-fontsize,
    data-d3pie-labels-percentage-fontsize and
    data-d3pie-labels-value-fontsize
    (code)

Hopefully I got you covered :stuck_out_tongue:, if not or you have any other questions do not hesitate to come back.

Thank you,
J.

3

Hello @novykh,
thank you very much for the quick reply. This is exactly what I was looking for.
If you already offer your help so kindly. Is it possible to move the chart inside the div container to the right? I already found the function “pieCenterOffset,” however I don’t know how to include it into my code. Obviosly it doesn’t work in CSS.
I also tried :

  • NETDATA.dataAttribute(state.element,‘d3pie-misc-pieCenterOffset’,x: 40px)
  • data-d3pie-misc-pieCenterOffset=“40,0”
  • data-d3pie-misc-pieCenterOffset=“40px,0”
  • data-d3pie-misc-pieCenterOffset=“40px”
  • data-d3pie-misc-pieCenterOffset=“x: 40px,y: 0”

I’m sorry if I make obvious mistakes, but I’m relatively new in this field and the project is mainly for learning.

Best regards
M.

4

Hey @e_mps,
So apparently you cannot change those values, since they are statically set.

            canvasPadding: {
                top: 5,
                right: 5,
                bottom: 5,
                left: 5
            },
            pieCenterOffset: {
                x: 0,
                y: 0
            },

and there is no way to pass a data attribute to override them at the moment. Of course this can change, either on your local copy of netdata or open a PR on the netdata/dashboard repo :slight_smile:

Here’s a quick demonstration of such change:

            pieCenterOffset: {
                x: NETDATA.dataAttribute(state.element, 'd3pie-misc-pieCenterOffset-x', 0),
                y: NETDATA.dataAttribute(state.element, 'd3pie-misc-pieCenterOffset-y', 0),
            },

We always welcome new contributors, so feel free to open a PR - we are kind reviewers mostly I promise :smiley:

Another approach, is to wrap the chart-div with another one with your own styles, that way you can just add padding and/or any other css rule you’d like. But I’m not sure whether that would satisfy your needs, since I don’t know the exact requirements of your project.

Best,
J.