Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

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


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

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?


Hello @SA_10100358 , 


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

Article which explains chart widget padding using Custom CSS

Check out this community post explaining Bar Chart using Custom CSS


Let me know if you need anything further.




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.

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.

Hi @SA_10100358 , 


I found this article to enable X & Y axis borderline for various chart widgets:

pls check this community post which describes the Custom Font using CSS:


Meanwhile I am also looking for something more concrete.




I checked these links previously but applying global class will not help to apply it on mashup all widgets with inner elements.
Thanks for your help.

Hello @SA_10100358


From a conversation with R&D, the Line Chart Widget in ThingWorx 9.2.x. The legend for the chart can not be modified with Custom CSS because the legend has not been exposed.


Top Tags