Invient charts add-on - Change of style of pie tooltip

Flow
1

Hi,

I am using Invient charts and I try to configure a pie chart.
I was able to change the layout thansk to CSS, but I have problems with the tooltip.

I changed the “FormatterJsFunction” like it is done in the examples.

chartConfig.getTooltip().setFormatterJsFunc("function() {"
+ " return 'b>'+ this.point.name +'</b>: '+ this.y +' %'; "+ "}");

But, the font-family and font-size used are not the global application ones.

There is a method “setStyle” on the Tooltip class, but I do not know

  • if this property is used to change the tooltip layout
  • the requested syntax that must be used

I tried to insert in this property :

  • style-name,
  • style like font-family:\"Verdana\";font-size:10pt;color: #000066;padding:0;white-space:nowrap;

Both of them lead to an error (unknown component).

Please, could you tell me :

  • if the “setStyle” method is the correct one to use to change the tooltip layout
  • which syntax I have to use to change properties like font family, size …

Thanks in advance

Pierre

2

The argument of setStyle() method is a JavaScript object but in the form of string. You cannot use font-family. Instead you need to use fontFamily or ‘font-family’. Try following:


style: {
            padding: 10,
            fontWeight: 'bold',
            fontFamily:'Verdana',
            fontSize:'10pt',
            color: '#000066',
            padding:0,
            whiteSpace:'nowrap'
        }

Cheers

3

It works !

I found some examples in the Invient Charts demo, but I only succeeded in setting the color.
Now, I understand how I have to define the style for the different elements.

Thank you very much.

Pierre