Custom CSS classes on the series-group area of a PivotChart

Custom CSS classes on the series-group area of a PivotChart

Posted by: georgekam96 on 3 February 2020, 7:26 am EST

• 

  georgekam96

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 February 2020, 7:26 am EST

  Greetings,

  We would like to know if there is a way to add custom CSS classes on the

  series-group

  area of a PivotChart. For example, we would like to control the max-width and the border-radius (essentially the rx/ry properties in the svg) of the columns in a column chart via some custom css classes.

  Is this possible?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2020, 1:38 am EST - Updated 3 October 2022, 5:44 pm EST

  Hi George,

  Could you please confirm whether you are referring to the selected part in the image below as the series-group?
  
  

  

  1247×407 23 KB

  
  
  If you are, then you may use the cssClass property of Series class to add a custom class for customization. Please refer to the sample link below:

  https://stackblitz.com/edit/query-pivot-panel-chart-bkfzgw

  Regards,
  
  Ashwin

• 

  georgekam96

  • Post Options:
  • Link
    Copy

  Posted 4 February 2020, 9:05 am EST

  Hello again,

  Unfortunately, the given solution does not resolve the issue, because if we alter the width of the bars, then the bars are not centered any more.

  We were wondering if there is a way to create those svg elements (i.e rect) based on the given rules and not just add the custom rules right after.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 12:19 am EST

  Hi,

  We are sorry but you cannot provide any custom rules on which the series of the chart will be created. The only way to change them is to get the reference of each rect element and change their dx/dy positions.

  Could you please let us know your use case so that we may assist you further?

  ~regards

• 

  georgekam96

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 11:02 am EST

  Hello,

  Generally, we want to alter the styles of the bars in a chart via CSS rules. The exact use case is described in the initial question (min-width and border-radius). Since this can’t be achieved, due to the fact that the bars are part of an svg, we can’t do much here.

  Thank you for your help.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 11:29 pm EST

  You are welcome