Unable to apply CSS to Schedule chart legend

[Aishwarya_Patil]

Hello Everyone,

I'm currently working on a Schedule Chart widget and want to align the legend items in a single horizontal row (the legend is currently displayed as a grid layout).

When I inspected the widget at runtime and manually changed the display property of [part="grid"] from grid to flex, it worked as expected. However, when I tried applying this through custom CSS, none of my attempts had any effect on the widget.

Here are the different methods I tried:
1.
ptcs-chart-legend::part(grid) {
justify-content: center !important;
align-items: center !important;
display: flex !important;
horizontal: true !important;
}

2.
ptcs-chart-schedule::part(legend)::part(grid) {
display: flex !important;
}

3.
@supports (ptcs-style-unit: "ptcs-chart-schedule") {
[part =grid]{
display: flex !important;
}
}

4.
@supports (ptcs-style-unit: "ptcs-chart-legend") {
[part=grid] {
display: flex !important;
}
}

When I applied the following CSS, the legend moved to the center, but it still displayed in a grid layout instead of a horizontal line.

ptcs-chart-schedule::part(legend) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
   gap: 10px;
   padding: 10px;
}

Thingworx Version : 9.6.3

Any guidance would be appreciated.

Thanks,
Aishwarya Patil

[PEHOWE]

Hello @Aishwarya_Patil ,  I have tried your solution and I am seeing the same behavior. I am checking with the subject matter expects to see if they have any suggestions.

Regards,

Pehowe

[PEHOWE · Accepted solution]

@Aishwarya_Patil 
I received an answer from the Subject Matter Expert. I have added the information to Article - CS439465 - ThingWorx Web Components Customization with CSS

For convince I am placing the code here as well.

Please review and test. If it meets your requirements place mark the solution.

Regards,

Pehowe

[PEHOWE]

Hello @Aishwarya_Patil ,

In answers your question.  For the benefit of other Community Members who may have the same question, it would be great if you could designate it as the Accepted Solution.

In the event that this response did not answer your question, please post your current status so that we can continue to support.

Thanks for using the PTC Community!

Regards,

Pehowe