[OutSystems Charts] How to show values on Timeline
Reactive icon
Forge component by Gonçalo Martins
Application Type


I am trying to use the New Charts V3 to display multiple samples of data in a line graph. 

However, each sample maybe done at different times of the month, or multiple times one month, or might not be done for several months. 

See below: 

On this graph there are 4 points, the first 3 are ~2weeks apart but the 4th is 4 weeks after the 3rd. 

Is there a way to show this to scale of the timeline it happens over? 



Hii @Christopher Robin-Kennedy,

you can not directly show values on line by making any kind of property enable/disable but this thing can be achieved in outsystems although it is little bit complex to achieve.

I have used javascript to draw the chart on canvas tag.

Step 1: 

Drag a container on screen Name it chartContainer (this ID is used in JS)

step 2 : now you need a canvas tag to show the chart over the canvas.

for that I have used Html container. 

now Drag HTML container inside the chartContainer.

Step 3: Open the HTML container and put canvas container with ID lineChart 

"<canvas id=""lineChart""></canvas>"

Step 4: define some css for chartContainer Id 

#chartContainer {  position: relative; border: 1px solid #ccc; }

define one more class in CSS 

  .data-point {            

position: absolute;

background-color: #3498db;

color: #fff;

padding: 5px;

border-radius: 5px; 

font-size: 12px;   


Step 5: 

now on onafter fetch on you aggregate or dataaction by which you are fetching your data of chart 

you need to create datapoints to show a chart

like this 


I have created this by the string concatination inside the loop into a local text variable and then i have passed it to JS 

the you have to convert it to json format by JSON.parse() method 

--------------JS code---------------------------------------------


            // Sample data (replace with your data)


            // var dataPoints = $public.BuiltinFunctions.toObject($parameters.DataPoints);

            var dataPoints = JSON.parse($parameters.DataPoints);

            var canvas = document.getElementById('lineChart');

            var ctx = canvas.getContext('2d');

            // Draw the line


            ctx.moveTo(dataPoints[0].x, dataPoints[0].y);

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

                ctx.lineTo(dataPoints[i].x, dataPoints[i].y);



            //Display values along the line

            dataPoints.forEach(function(point) {

                var div = document.createElement('div');

                div.className = 'data-point';

                div.style.left = point.x + 'px';

                div.style.top = point.y - 20 + 'px'; // Adjust the vertical position

                div.textContent = point.y;






I have called above js after 3 seconds of onafterfetch call so DOM can proper ready until.

result :

Sorry for my bad explanation. for your help I am also attaching OML file.

kind regards,

Sanjay Kushwah

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.