Label at Plotline in Linechart

Label at Plotline in Linechart

  

Hallo Everybody, 


I try to set a label to a plotline in a linechart, but the label is not shown.

I added the following code to the xAxisJSON in the AdvancedFormat variable of the chart:

SyntaxEditor Code Snippet

plotLines: [{
            color: 'black',
            width: 2,
            value: 120,
            zIndex: 99, 
            label: {
                text: 'Max. Activity Rate: 120',
                rotation: 0,
                verticalAlign: 'top',
               
                    }
        }]

 The plotline appears as expected, but the label is still missed. Has anybody a hint what I'm making wrong? 


Thanks Daniel

Hi Daniel Krueger,

Remove the last comma of:

verticalAlign: 'top',
}

Regards,

Marco Arede wrote:

Hi Daniel Krueger,

Remove the last comma of:

verticalAlign: 'top',
}

Regards,

Hi Marco,

this does not change anything :| ...

regards Daniel


Does the forge component Charts_HowTo help you? Or maybe examples available in HighCharts?

Hello, 

now I tried the Chart_HowTo component and the is nothing that helped me bringing a label to a plotline. 

In meantime I'm very familiar with the HighCharts API documentation and all examples there are working fine in the JSFiddle, but do not work within Outsystems. 

I also implemented a quite simple block that just contained a LineChart with 3 simple points and copied an example for labels on a plotline from the HighCharts to the yAxisJSON of that LineChart. Even there the label is not shown. 

Could it be that this is a bug in the HighCharts implementation of Outsystems??? 

Do I need to enable the labels somehow? 

Are there any other ideas how to put labels to plotlines?

SyntaxEditor Code Snippet yAxisJSON:

"
 plotLines: [{
            color: 'red',
            width: 2,
            value: 15,
            label: {
                text: 'Plot line',
                style: {
                    color: 'blue',
                    fontWeight: 'bold'
                }
            }
        }]
"


Hey Daniel!

We are currently working on an issue that seems very similar to yours. 

Can you please upload a sample oml with the issue replicated so I can look at it?


Cheers

Hey Rita, 

thank you for your answer. I appended a test sample that shows the issue. It's  just a simple LineChart with a 3 point series and a Plotline at the x axis. All things happen in the OnInitialize function of the PlotLineLineChart block. 


Cheers

Solution

Hey Daniel!

Ok, so I've checked that it's a HighCharts problem and it has already been solved in version 11 of the Charts. If you guys are thinking of upgrading for version 11 from 10, you won't have to worry about this.

Now, for version 10, we are still discussing what we're going to do since it's not as simple as fixing a piece of the code. For now, if this is blocking you and if you find it is the best solution for your use case, you can always clone the ChartsMobile and change the scripts (Highcharts is the highcharts.js and HighCharts3d is highcharts-3d.js) to the newest HighCharts where this has been is fixed (6.1.4) which is the one that we have on OutSystems 11. I've already tested this on our side and it works, the plotline exists. 

This, however, has some disadvantages and consequences: Doing this has the danger of never receiving fixes when there are new versions as it is typical for cloned espaces (hence why we usually don't suggest it).

Hope this helps,

Cheers,

Rita

Solution

Rita Dias wrote:

Hey Daniel!

Ok, so I've checked that it's a HighCharts problem and it has already been solved in version 11 of the Charts. If you guys are thinking of upgrading for version 11 from 10, you won't have to worry about this.

Now, for version 10, we are still discussing what we're going to do since it's not as simple as fixing a piece of the code. For now, if this is blocking you and if you find it is the best solution for your use case, you can always clone the ChartsMobile and change the scripts (Highcharts is the highcharts.js and HighCharts3d is highcharts-3d.js) to the newest HighCharts where this has been is fixed (6.1.4) which is the one that we have on OutSystems 11. I've already tested this on our side and it works, the plotline exists. 

This, however, has some disadvantages and consequences: Doing this has the danger of never receiving fixes when there are new versions as it is typical for cloned espaces (hence why we usually don't suggest it).

Hope this helps,

Cheers,

Rita


Hey Rita, 

thanks for the information, we are going to update our enterprise environment  to Outsystems 11 in the next weeks and we decided to implement the plotlines in our charts after the update.

To make sure that it works in Outsystems 11, I rebuild the small test app in my personal environment, witch is already updated. I must say it does't work there anyway and so I guess do something wrong. 

I attached the Outsystems 11 *.oml file to this post. Could you please have a look at it again?


Thank you very much!!!


Daniel

Hey Daniel!

Unless you have the version from the charts that was released yesterday (27th of November) it won't work :) 

It looks fine to me when I open on my end, and hopefully after you update the charts it will be right as rain!


Cheers!

Hey Rita, 

thank you !!! Now it works ... 

Cheers !!