Skip to main content
7-Bedrock
January 19, 2022
Question

Apply Custom CSS for elements (legends,titles,lables,values) inside the Chart Layout

  • January 19, 2022
  • 1 reply
  • 4010 views

How to apply CSS for elements legends, titles, values inside chart Layout
I am trying to apply custom CSS for the elements like legends, labels, titles, values to apply the custom fonts styling and the alignments of the sub-elements inside the chart.
I can see the elements after inspecting on the browser with prefixes name - ptc-legend, title, root
inside the chart layout,
I am using the charts - Bar Chart, Line Chart, Schedule Chart.
1. Could you please help me, how to apply the customs CSS on chart layout elements?
2. How we can minimize the chart layout padding, Inside the collection I used the bar chart but the padding of outside the chart layout increases the height of the collection cell. how we can remove or decrease the chart layout scale?

1 reply

5-Regular Member
January 19, 2022

Hello @SA_10100358 , 

 

Here, I am sharing an example of Custom CSS of Pareto chart:

https://www.ptc.com/en/support/article/CS359300

Article which explains chart widget padding using Custom CSS

https://www.ptc.com/en/support/article/CS343992

Check out this community post explaining Bar Chart using Custom CSS

https://community.ptc.com/t5/ThingWorx-Developers/Bar-chart-widget-scaling-down-and-editing-css-rules/td-p/709669?posno=5&q=bar%20chart%20custom%20CSS&source=search

 

Let me know if you need anything further.

 

Regards

Bhawna

7-Bedrock
January 19, 2022

I checked the above link it seems it require the property attribute "part map" tag, but in my above case these tags are not displayed when inspecting the browser for chart elements. I will try let you know if the Pareto chart CSS for other charts eg. Bar chart, Line Chart if it works or not.

7-Bedrock
January 20, 2022

Hi, I tried to apply the custom font for legends and labels/values on x and y axis can you please provide a solution for how we can apply custom CSS font for any chart eg. Bar, Line, Schedule chart?
The link provided in the previous reply did not help to resolve the custom styles for legends and x/y axis labels and values.