Skip to main content
S
SA_101003587-Bedrock
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

    B
    bchaudhary_4480085-Regular Member
    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

      S
      SA_101003587-BedrockAuthor
      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.

      S
      SA_101003587-BedrockAuthor
      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.

      Terms & ConditionsAccessibility statement