Skip to main content
pshashipreetham
18-Opal
pshashipreetham18-Opal
18-Opal
March 21, 2024
Solved

Remove Extra Spaces and Rest Layer in Line Chart

  • March 21, 2024
  • 2 replies
  • 1446 views

Hi, 

 

I was working on the Line Chart. I don't see many options to remove the extra padding and space in the LineChart and the Reset Area in the Line Chart.

pshashipreetham_0-1711018703918.png

ChartType: Area Chart
Thingworx version: 9.3.6

 

Thanks,

Best answer by pshashipreetham

Hello.

 

So, the Padding is not due to CSS. When the X-axis is in the Timestamp format, extra dates are shown on the Left and Right sides of the Chart, but there is no value for them; those dates are auto-generated by the Chart, which is the reason for the space.

 

To avoid this, I have bound the X-AxisMinmumValues and X-AxisMaximumValues with the Max Date and Min Date from the Data given to the Chart.

pshashipreetham_0-1711095604203.png

 

If Someone needs the code to get the Max and Min from the Data of the Chart, below is the code for it:

 

let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
 infoTableName: "InfoTable",
 dataShapeName: "FSR.MaxMinDates.DS"
});

if(InfoTable && InfoTable.length)
{
 InfoTable.Sort({ name: "Timestamp", ascending: false });
 let minTimeStamp = InfoTable.rows[InfoTable.length - 1].Timestamp;
 let maxTimeStamp = InfoTable.rows[0].Timestamp; 

 result.AddRow({
 MaxTimeStamp: maxTimeStamp, // DATETIME
 MinTimeStamp: minTimeStamp // DATETIME
 });
}

 

 

I am unsure how I removed exactly the Reset button from the Chart. There should be a property that I changed by mistake, and it disappeared.

 

Thanks a lot, @Velkumar, for putting in the effort and sharing the CSS with me; I appreciate it.

 

Thanks,

2 replies

V
19-Tanzanite
Velkumar19-Tanzanite
19-Tanzanite
March 22, 2024

Hi @pshashipreetham 

 

You can use the below CSS to remove extra padding and hide the default reset button

 

.myclass ptcs-chart-line::part(chart-layout){
 padding : 0px;
}

.myclass ptcs-chart-line::part(zoom-xaxis){
 height : 0px;
 padding : 0px;
}

 

 

Velkumar_0-1711084594396.png

 

To place a reset button over the line chart, create a layout top of the line chart container and make it an overlay container.

 

Velkumar_2-1711084747966.png

 

 

/VR

 

 

pshashipreetham
18-Opal
pshashipreetham18-OpalAuthorAnswer
18-Opal
March 22, 2024

Hello.

 

So, the Padding is not due to CSS. When the X-axis is in the Timestamp format, extra dates are shown on the Left and Right sides of the Chart, but there is no value for them; those dates are auto-generated by the Chart, which is the reason for the space.

 

To avoid this, I have bound the X-AxisMinmumValues and X-AxisMaximumValues with the Max Date and Min Date from the Data given to the Chart.

pshashipreetham_0-1711095604203.png

 

If Someone needs the code to get the Max and Min from the Data of the Chart, below is the code for it:

 

let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
 infoTableName: "InfoTable",
 dataShapeName: "FSR.MaxMinDates.DS"
});

if(InfoTable && InfoTable.length)
{
 InfoTable.Sort({ name: "Timestamp", ascending: false });
 let minTimeStamp = InfoTable.rows[InfoTable.length - 1].Timestamp;
 let maxTimeStamp = InfoTable.rows[0].Timestamp; 

 result.AddRow({
 MaxTimeStamp: maxTimeStamp, // DATETIME
 MinTimeStamp: minTimeStamp // DATETIME
 });
}

 

 

I am unsure how I removed exactly the Reset button from the Chart. There should be a property that I changed by mistake, and it disappeared.

 

Thanks a lot, @Velkumar, for putting in the effort and sharing the CSS with me; I appreciate it.

 

Thanks,

Terms & ConditionsCookie settingsAccessibility statement