Is it possible in skuid page to Add a Horizontal Line in a Chart

Hi @Trupti, welcome to the Skuid Community!

You can add a line to indicate a target with a little bit of setup:

1. On the model that’s providing data for your chart, add a ui-only field set to Display type: Formula, and Formula Return Type: Number. Then in the formula editor, add the number value you want your target set at.
   

   

2. On your chart, create a new Series using the ui-only field as the Data field, and set the Type to Line. You’ll also want to make sure the new series is still using the same category field as the main data series. If you want to customize the label for the horizontal line, set the Split type to Template and enter your custom label in the Split template field.
   

   

With that setup, you should get something like this:

Thanks Elena.

What if I am using 3 different models to generate a single chart? I have tried the above stapes but instead of line it is showing dot on a chart.

I have attached chart. How can I add horizontal line in this chart so it can display the ranking
like 2nd image

I have tried your steps but instead of showing line its showing a dot.

Thanks for your help

Man, using multiple models definitely makes this trickier, but I think I’ve found a solution using a before render snippet.

Add the following snippet to your page, and then reference it in the Chart Properties > Advanced section in the Before-render snippet field.

Then you can adjust the snippet to configure how you want the plot lines to appear. There’s a bunch of options listed in the highcharts documentation:

Highcharts API Option: yAxis.plotLines

An array of lines stretching across the plot area, marking a specific value on one of the axes.

var chartObj = arguments[0],
 $ = skuid.$,
 targetModel = skuid.model.getModel('MyTargets').getFirstRow(); // get targets from a model

 $.extend(true, chartObj.yAxis[0],{
    plotLines: [{
        value: targetModel.target1, // you could alternatively use a static value here
        color: 'green',
        dashStyle: 'shortdash',
        width: 2,
        label: {
            text: 'Target 1'
        }
    },{

        value: targetModel.target2, // you could alternatively use a static value here
        color: 'red',
        dashStyle: 'shortdash', 
        width: 2,
        label: {
            text: 'Target 2'
        }
    }
    ],
 });