starter question : are you using an old or the newest (3.0.0) OutsystemsCharts version ?

also, trendline is part of highstock not highchart, so you won't be able to do it with only Outsystems charts, you'll have to add some libraries manually, I think.

Hi @Saravanan Santhanam ,

As Dorine said Trendline chart is not the part of highchart and outsystems but you can achieve it by using JavaScript and CSS style.

Here's a high-level guide on how you might implement a trend line on a column chart in OutSystems:

1.Create the Column Chart:

Use the native OutSystems charting component to create your column chart with the data you want to visualize.

2.Add JavaScript and CSS:

In the screen containing your column chart, add a JavaScript block where you can customize the appearance and behavior of the chart. You can also add a Styles block to include custom CSS.

3.Calculate Trend Line:

In the JavaScript block, calculate the trend line based on your chart data. This involves performing regression analysis on your data to determine the slope and intercept of the trend line equation.

4.Draw Trend Line:

Using the calculated slope and intercept, draw the trend line on the chart. This can be done by creating a line or a series of connected points on the chart canvas.

5.Styling:

Use the CSS block to style the trend line and other elements of the chart as needed.

Here's a simplified example of how you might approach this using JavaScript and some basic chart customization:

JavaScript Block:

// Calculate trend line slope and intercept (example)

var dataPoints = [/* your data points here */];

var sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;

for (var i = 0; i < dataPoints.length; i++) {

    sumX += dataPoints[i].x;

    sumY += dataPoints[i].y;

    sumXY += dataPoints[i].x * dataPoints[i].y;

    sumX2 += dataPoints[i].x * dataPoints[i].x;

}

var slope = (dataPoints.length * sumXY - sumX * sumY) / (dataPoints.length * sumX2 - sumX * sumX);

var intercept = (sumY - slope * sumX) / dataPoints.length;

// Draw trend line

var ctx = document.querySelector('#YourChartCanvas').getContext('2d');

ctx.beginPath();

ctx.moveTo(dataPoints[0].x, slope * dataPoints[0].x + intercept);

ctx.lineTo(dataPoints[dataPoints.length - 1].x, slope * dataPoints[dataPoints.length - 1].x + intercept);

ctx.strokeStyle = 'red'; // Set trend line color

ctx.stroke();

Style Block:

/* Style the trend line */

#YourChartCanvas {

    position: relative;

}

Remember that this is a simplified example, and you might need to adapt it based on your actual charting component, data structure, and requirements 

Regards,

Arun