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

Padding on a Line Chart widget

JakubJaskulski
5-Regular Member

Padding on a Line Chart widget

How can I change padding on a line chart widget?

 

JJ_9767420_0-1614594194268.png

JJ_9767420_1-1614594256979.png

 

Further explanation: The padding is placed on ptcs-chart-layout in shadow root, this is why custom classes don't affect it.

 

I was trying to use :host and other pseudo-class selectors, JavaScript in expression (document element and JQuery) and nothing seems to work. Creating custom widget is an option, but it's not the first time that I've encountered this issue (especially in newer ThingWorx versions) and I was wondering if someone already has a solution that would work in this type of situations.

1 ACCEPTED SOLUTION

Accepted Solutions
c_lowy
13-Aquamarine
(To:JakubJaskulski)

This functionality has been added by our R&D team and will be available starting ThingWorx 9.1.5 and 9.2.0. You will be able to use the following Custom CSS script to remove all passing starting those versions :

ptcs-chart-line::part(chart-layout) {

  padding: 0;

}

 

The following article has been published for reference : Unable to modify Line Chart widget padding using Custom CSS in ThingWorx.

 

View solution in original post

7 REPLIES 7

Try with CSS? Unfortunately not my strength, but I wonder if you could perhaps even try negative padding to see what happens.

JakubJaskulski
5-Regular Member
(To:PaiChung)

The problem is that in new widgets many elements are encapsulated in shadow roots, which renders custom classes useless against them. I could select this element (ptcs-chart-layout) if it had part property like all its child elements, but this particular one doesn't have it. I could find it in Mashup Expression using javascript, but as far as I'm concerned Mashup Functions do not allow using document element nor JQuery - both solution tested in devtool and working, but unable to implement them in Mashup Builder.

@JakubJaskulski ,

 

Try this for the line chart (make sure to put the custom class in the widget properties.  In the example below, I've called it myClass)

 

.myClass .widget-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

 

JakubJaskulski
5-Regular Member
(To:nmilleson)

Didn't work. Your solution affects ptcs-chart-line, which is last element before shadow root. This heavy padding that I'm trying to remove is in ptcs-chart-layout.

 

As I've mentioned above, this particular element and its padding is encapsulated within a shadow root, so I can't select it using normal css selectors.

@JakubJaskulski ,

 

My mistake.  I didn't read through your question well enough.  I wasn't able to figure out any way to select that element either.  I've also run into this issue several times with other widgets and it's pretty frustrating.  In TWx versions before 9.0, I'd just export the code for the widget, modify it, and re-import it.  I haven't tried that with the web component widgets yet.

 

 

c_lowy
13-Aquamarine
(To:JakubJaskulski)

This was moved to a support case and this use case (and similar) is being discussed with R&D to see if/how this can be addressed. Resolution will be posted here once investigation has made progress.

Thanks !

c_lowy
13-Aquamarine
(To:JakubJaskulski)

This functionality has been added by our R&D team and will be available starting ThingWorx 9.1.5 and 9.2.0. You will be able to use the following Custom CSS script to remove all passing starting those versions :

ptcs-chart-line::part(chart-layout) {

  padding: 0;

}

 

The following article has been published for reference : Unable to modify Line Chart widget padding using Custom CSS in ThingWorx.

 

View solution in original post

Announcements