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

[SA_10100358]

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?

[bchaudhary]

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

[SA_10100358]

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.

[SA_10100358]

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.

[bchaudhary]

Hi @SA_10100358 , 

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

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

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

https://community.ptc.com/t5/ThingWorx-Developers/Custom-Font-using-CSS-Solved/td-p/626000

https://community.ptc.com/t5/ThingWorx-Developers/Time-Series-Chart-X-Axis-size-and-Y-Axis-size/m-p/687602#M47836%3F&posno=3&q=custom%20CSS%20font%20for%20chart&source=search

Meanwhile I am also looking for something more concrete.

BR

Bhawna

[SA_10100358]

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.

[PEHOWE]

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.

[SA_10100358]

ok