Show vertical lines on stacked bar charts
Application Type
Reactive

Hi Team,

We are developing outsystems bar chart, converted it as stacked bar too. 

1. Now on that chart have to show vertical lines at two desired points one 70% and 90%. 

I tried this below code,

xAxis: {
    plotLines: [{
        color: '#B0D65E',
        width: 2,
        value: 70 
    }]
}.

But it is not working.

2. We have to show values on the charts. 

Can you please help us to resolve the above two issues.

 For you reference attached the screenshot


Regards,

Saravana

Capture.PNG

Hi Laura,

Thanks for your mail,

I have gone through the above links. I don't see that the solution for to implement vertical lines on stacked bar chart in outsystem.

Could you please share me the logic for above two questions.

Thanks,

Saravana

Sorry to know that!

I kept looking and you can find a solution in this oml. I don't know if this line is exactly what you want, but it can be a start.

See the demo here: https://laurafidalgo.outsystemscloud.com/DemoChart/Charts?_ts=637874268973145659

Hope this helps you :) 

DemoChart.oml

Hi Laura,

Thank you for your response. I have tried your solution. Out of two issues,  It works for showing vertical lines at desire points.

About showing values on the chart is not. 

What Am expecting i have attached the screenshot. Can you please help on the showing values on the stacked bar.


Advance thanks.

Regards,

Saravana

expect-barchart.PNG

Hey @Saravana Kumar ,

Glad to know that one of your issues is solved! Regarding the values on the chart, did you enabled the ShowDataPointValues under ChartFormat?


Hi Laura,

Yes i have enabled it.


After enabling this,


Regards,

Saravana

Hey @Saravana Kumar 

Can you try this in the HighchartsJSON:

"{
  'plotOptions': {
    'series': {
      'stacking': 'normal',
      'dataLabels': {
        'enabled': true,
        'formatter': function () {
                            return (100.0 * this.y / this.total).toFixed(1)+'%';
                        }
      },
      'animation': false
    }
  }
}"

Hi Laura,

I have added the above code in HighChartsJSON but still it didn't is not coming. 

Below the code,

"colors: ['#09A92D', '#92D050', '#FFC000', '#F8D3D3', '#FE9292', '#FD0000'],
'plotOptions': {
    'series': {
        'stacking': 'normal',
        'dataLabels': {
            'enabled': true,
            'formatter': function() {
                return (100.0 * this.y / this.total).toFixed(1) + '%';
            }
        },
        'animation': false
    }
}"

And i tried to enabled and disabled the chartFormat as well. 

Output is coming like this,



Regards,

Saravana

Have you tried first without the colors, to see if there's something interfering? Or tried putting the 'colors' part inside the plot options?

Yes Laura,

Yes, I tried it

If you don't mine Can you please modify in your existing oml send it to me to resolve the issue.


Regards,

Saravana 

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