Skip to main content
pshashipreetham
pshashipreetham19-Tanzanite
19-Tanzanite
Dec 25, 2021 9:22 PM UTC
Solved

Line Chart Padding Issue

Placed a Line Chart on the Mashup, as soon as Chart Plotted, the chart is not getting placed properly on the dashboard.
May be this is due to the Padding issue. The Line chart on the dashboard is something like this:

psp316r_0-1640471355328.png


 How Can Padding properly set for the Line Chart.
 
@paic @slangley @c_lowy @VladimirN 

Thanks,
Shashi

pshashipreetham
pshashipreethamAnswer
19-Tanzanite
Jan 8, 2022 8:23 AM UTC

The issue is solved by the CSS provided by @c_lowy .

ptcs-chart-line::part(chart-layout) {
padding: 0;
}
If there are 2 or more DataSources given to the Line chart,
1. Enable the Multiple Data source Visualization option in widget properties, and
2. Connect to the 2 or more Data Sources to chart widget again.
3. Select the X Axis as TimeStamp(in my case)

Thanks,
Shashi

Shashi Preetham || +91 8099838801 || shashi@psptechhub.com
View in thread

8 replies

bchaudhary_4480085-Regular Member
5-Regular Member
Dec 27, 2021 5:44 AM UTC

Hi @pshashipreetham , 

 

Kindly check the below attached article:

https://www.ptc.com/en/support/article/CS343992?posno=1&q=line%20chart%20padding&source=search

 

Revert back in case of further challenges. 

 

Regards

Bhawna

Translate
    pshashipreetham
    pshashipreetham19-TanzaniteAuthor
    19-Tanzanite
    Dec 27, 2021 7:19 AM UTC

    Hi @bchaudhary_448008 ,

    tried the article, didn't help. The Picture in the issue posted is after trying out the article you have shared.

    Thanks,
    Shashi.

    Translate
    Shashi Preetham || +91 8099838801 || shashi@psptechhub.com
    PEHOWE17-Peridot
    17-Peridot
    Dec 29, 2021 2:06 PM UTC

    @pshashipreetham

     

    Have you provided values for the properties "XAxisMaxmumValues", "XAxisMinimumValues", "YAxisMaximumValues" and "YAxisMinimumValues". These properties can be bound to services if the X Axis values change based on other issues.

     

    Hope this helps.

     

    Translate
    GuruPrasad112-Amethyst
    12-Amethyst
    Dec 29, 2021 5:48 AM UTC

    make the container fixed height

     

    Translate
    pshashipreetham
    pshashipreetham19-TanzaniteAuthor
    19-Tanzanite
    Dec 30, 2021 12:14 PM UTC

    Hey Hi @GuruPrasad1 ,

    Didn't get you, can you show a example ?

    Thanks,
    Shashi.

    Translate
    Shashi Preetham || +91 8099838801 || shashi@psptechhub.com
    GuruPrasad112-Amethyst
    12-Amethyst
    Dec 30, 2021 12:30 PM UTC

    Hi Shashi,

    Usually this happens when the container in which your are placing the chart is responsive, if you instead choose a fixed length and give a value say 500px this would appear better. This settings you can find in the layout tab am attching

     

    GuruPrasad1_2-1640867377075.png

     

     

    GuruPrasad1_0-1640867292113.png

     

    Regards

    Guruprasad S

     

    Translate
      pshashipreetham
      pshashipreetham19-TanzaniteAuthorAnswer
      19-Tanzanite
      Jan 8, 2022 8:23 AM UTC

      The issue is solved by the CSS provided by @c_lowy .

      ptcs-chart-line::part(chart-layout) {
      padding: 0;
      }
      If there are 2 or more DataSources given to the Line chart,
      1. Enable the Multiple Data source Visualization option in widget properties, and
      2. Connect to the 2 or more Data Sources to chart widget again.
      3. Select the X Axis as TimeStamp(in my case)

      Thanks,
      Shashi

      Translate
      Shashi Preetham || +91 8099838801 || shashi@psptechhub.com
        Terms & ConditionsAccessibility statement