Post Closed
762
Views
47
Comments
OutSystems Charts v3.0.0 has been released! 🚀


Dear OutSystems developers,

We are excited to announce the launch of the latest version of the OutSystems Charts component! This new version comes with an improved developer experience that will make creating charts easier and more flexible.

One of the major changes in this new version is the introduction of add-ons, which are blocks that represent chart elements. These add-ons bring new features and can be easily added to chart placeholders, providing greater customization options for your charts. With add-ons, you can easily add new chart elements such as data points, labels, and legends, or customize existing ones to suit your needs. 

This new major includes exciting new features like a brand new chart type, the Radar, and the possibility of having chart combinations (a chart with a line and column).


But that’s not all! we are also launching documentation with a set of ready-to-use charts. It contains examples of the most common use cases as well as advanced scenarios, to help you get started even faster. These chart examples can be easily downloaded and customized to fit your specific needs and requirements, giving you a head start in creating powerful and beautiful visualizations. 

We are confident that this new version of the OutSystems Charts component combined with the documentation will help you create better, more powerful charts in less time. To try it out, simply download the latest version of the Charts component from the Forge and check the documentation.

We welcome any feedback or questions you may have about the new version of the Charts component, and we hope you enjoy using it as much as we do!


Best regards,
Jéssica M.

2021-08-31 07-27-14
Vijay Perumalsamy

Thank you for sharing this!!!

2023-06-15 18-30-12
FRANK JOHNNY GANGUILHET

That's great news! Thanks!

UserImage.jpg
Manimaran Keppan
thanks for the update
2023-03-07 09-33-07
Richard Dyson

Good news, Thanks!

2025-04-16 10-58-33
Priyanka Babar

That's great news 

UserImage.jpg
Lindiswa Malizole

Thank you for sharing 

2024-04-05 19-22-12
João Sousa

Thanks!! 

2023-08-28 07-00-10
Paulo Torres
Champion

That's a good improvement!

2024-11-14 08-23-36
Melvin September

Will it be possible to make a (Solid) Gauge chart with this new update?

2021-08-31 12-13-44
Jéssica Mendes
Staff

Hi @Melvin September
The Solid Gauge requires a specific highcharts script that we are not offering currently, and for that reason is not possible. We are exploring solutions to add highcharts scripts the same way you can add add-ons that will allow you to make a gauge chart through extensibility, but we don't have a timeline for that improvement yet.

2021-04-17 09-53-48
José Gonçalves

Awesome! Please keep delivering more chart types in the future.

UserImage.jpg
Greg Adams

I am in the middle of a complicated charting idea. Very interested to take a look at the new release.

The line+column option is in the styling add-on?

Is there any more detail of how to use the radar/polar chart. Not obvious to me from the image.  I see it needs 


Entities.ValuesType.Text


I will install later today, I assume it contains enough examples to help understand it.

2021-08-31 12-13-44
Jéssica Mendes
Staff

Hi @Greg Adams!

Yes, to combine different chart types you will need to use the SeriesStyling addon, you can combine any of the available chart types. You can check this sample to see how to do it.

Regarding the Radar Chart, in terms of how to configure it, it's pretty similar to the rest of the charts, just by inputting the data you will have a radar chart with each series being represented as a line. The valuesType property is not mandatory and it's only needed when you want to change the type of data, for example, if instead of categories you want dates on the axis. 
You can find more details on our sample, you can even download the examples to see how they are implemented. If you need a Radar with polygonal axis you can also check this sample that explains how to achieve that use case. 

Try it out and let us know if the documentation was useful :) 

UserImage.jpg
Greg Adams

My confusion on radar charts was that I didn't grasp what I was seeing.

To check...

The words that are displayed around the graph are the labels that would usually be displayed on the horizontal axis of a line chart?

So it is like a line graph that has been rolled into a circle?


2021-08-31 12-13-44
Jéssica Mendes
Staff


Yes, the labels around the circle are the ones that are usually on the X Axis, the labels inside the circle represent the values on the Y Axis and each line (the colored ones) represents a Series. 

UserImage.jpg
Greg Adams

I installed the new version.

Do I have to do something inside the module to change from using the old one? Set up a new dependency?

The older version seems to have a bug (or I am not using it right) in that a change of color in a line chart only seems to affect the individual points. They are the correct color but the lines connecting them are always blue and the legends under the charts are also shades of blue.

 Is this a known issue/ am I doing something wrong / is it the same in the new version?

2021-09-06 15-09-53
Dorine Boudry
 
MVP

you are probably giving the individual datapoints a color.  That is possible (and has its use for making a single datapoint stand out compared to the others in it's series)

But what you probably want is to have a given series in a desired color, you do that by specifying at the series level.  That is true in both old and new version of the charts.

old version is in the advanced format

new version is in addon block

Dorine

UserImage.jpg
Greg Adams

Thanks again, Dorine, very helpful.

At the design stage I don't know what the series will be called (1 of 5 possible static names to be selected by user). The color is currently 1 of 7 possible predetermined values but later may be user choice too.

I presume is is possible to put a variable in the relevant boxes instead of the text literals.

In the older version the text variable would have to been generated in the form 

"Color: 'red' "

and for the newer version just

"red"

Does that sound right? 

2021-09-06 15-09-53
Dorine Boudry
 
MVP

yes all correct,

that means that in the old version, you'll have to do something like (bold,red,underline for emphasis on the single quotes, what is easily forgotten :

"Color : '" + DesiredColorVariable + "'"

UserImage.jpg
Greg Adams

Yesterday I switch the app over to using the V3 charts. Immediate impression was that the default colors for different series are much easier to distinguish one from another than the v1 which used various shades of blue.

Also, very nice to be able to change the type of chart in the properties panel. (Not sure if that was possible on v1)

One odd effect is that when I added a V3 chart next to the original, the original stopped rendering in the browser but still took up space. This wasn't a problem as I was going to delete the v1 charts anyway

Something that confused me is that the new charts have a box where the add-ons are listed. I incorrectly inferred that I was supposed to drag & drop my preferred add-on into this area.

It took a while to see that the properties box already had the add-on boxes.

Copying across the settings from the v1 widgets was easy, although the order of the label and value boxes seems to have switched in v3

Some minor hitches. Having installed V3 via the website I assumed that the widgets would show up in the tool box automatically, but that isn't how things work. I had to 'search other modules.' In the dialog window the old version is marked v1, but the newer version isn't marked with a version.

Having swapped the charts everything worked without any need to change anything.

Also, the use of the very different series colors has removed the need that I was putting off of changing the colors of the series in v1.

(On the link to the samples file, I had no idea what an OPA file was or how to use it. Okay for people who already now, but a mystery to the rest of us. Any chance that a short explanation next to the link could be useful?)

2021-08-31 12-13-44
Jéssica Mendes
Staff


Thank you for the feedback @Greg Adams!

Are you talking about the samples on charts.outsystems.com?
If so, when you click on "Open in Service Studio", opens this popup and at the top you have the link to download the sample with all the working examples:


Once you have it installed in your environment, you just need to input your Server URL and the sample will open on the example you are trying to see.

2021-05-21 21-56-03
Anderson!

Supa!

2025-01-30 09-20-02
Vinayak Siddhiwal

It's great to have new features.

2023-04-04 15-04-03
MarcosElorza

Do you use Js for any interection with HighCharts or only basic Is done?

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @MarcosElorza,

Could you please explain what you mean by that?
The Highcharts library is written in javascript so under the hood we use javascript to communicate with it. 
But like the previous version, we provide a low code experience (in this latest version much richer than the previous one) that will allow you to achieve several simple and complex use cases without needing to write a single line of javascript code.
From what you tested what has given you a different perspective so that we can try to better clarify your question?

Cheers,
GM


2019-07-25 15-05-16
Henrique Silva

Great news! The charts actually look more modern by default, that great!

I can't wait to try it.

Congrats team!

2014-10-21 20-15-17
Alberto Ferreira

Good News!! More chart funcionalities 

2023-04-24 12-19-38
Jeswin Raj

exciting to work on this new updation

2019-07-25 15-05-16
Henrique Silva

Are there any breaking changes to the last version?

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Henrique Silva 

Although this is a major version where that could happen, there is only one that you can see in the release notes which was a block that was removed but was already deprecated for a long time. 
You can also check some FAQs present on our landing page here

Cheers,
GM

UserImage.jpg
Michel Veerman

I presume HighCharts itself was upgraded too, so that might result in some broken JSON here and there?

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

HighCharts is, in general, very downwards compatible, so I wouldn't expect that.

2018-06-01 14-37-59
Rebecca Hall

Can we please have other chart types added soon?  It would be nice to have a bubble chart and being able to combine a bar or column chart with a bullet chart.

2023-04-03 17-50-41
Samuel Ribeiro

Otimas noticias!!!


2022-12-26 04-01-30
Anuj Kumar Chauhan

Thank you!

2022-08-10 06-17-04
Mita

wow! can't wait to use them.

Thanks!

UserImage.jpg
Anuli Hande

Thank you for sharing this !

2024-05-20 09-45-12
Jean Bastos

I was forward for this changes, Thanks!

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Nice work, I think the effort of bringing all complexities more into a low code / visual / organized approach will really allow developers, who haven't done much yet with charts, to try things they felt weary of before.  I like those separate blocks for things like legend and axis etc.

However, some initial findings after a quick test for some other forum post

  • the ordering of the series in a stacked column chart, is reversed compared to v1 (was bottom to top, is now top to bottom)  could be a surprise for the end user when upgrading existing charts to this new widget without changing the ordering of the underlying datapointlist.
    As far as I can tell, OS used "reversedStacks : false" on the old version of this chart type, and is now not doing that anymore, and as the Highcharts default is true, it is now different from before. 
  • I was looking for a way to also start at the bottom with the new chart, and I thought I could use the SetHighchartsYAxisConfigs action for this, but i didn't really have succes, and don't really understand the interface/input structure : for each config you want to set, there are multiple 'paths' ??  That feels a bit odd to me, i would have simply expected property value pairs (so single property name, single value)
    Trying this didn't work :

  • if datapoint list is incomplete (i.e. not every x-axis label has a datapoint for every series) a stacked column chart shows blocks in the wrong stack.  I vaguely remember this has been an issue on the old chart in the past but was fixed at some point


Dorine

2021-08-31 12-13-44
Jéssica Mendes
Staff

Hi @Dorine Boudry

Thank you for the feedback :) 

To answer your points: 

  • In this new version we tried to avoid changing the Highcharts defaults because in version 1 we received some feedback that it was not clear which properties we were changing and was difficult to overwrite them. Regardless of that, the reversedStacks property might bring value being offered by default, we will review the decision for this particular property.

  • Regarding the SetHighchartsYAxisConfigs client action, you are doing everything right but since that property it's a boolean, you need to remove the quotation marks. The parameter also accepts false with quotation marks but in uppercase like this: "False". We will also review this to accept it in lowercase.

  • It's an issue and the fix will be included in the next release.
2021-08-31 12-13-44
Jéssica Mendes
Staff

Regarding the structure of the client action, being a list it's the only way we have to allow to reach more than one level of the object. 

For example:
To change the color of the yAxis label you need to use this property, which has 3 levels. So in the client action PropertyPathList you will need the following list:
[0] "labels"
[1] "style"
[2] "color"

If you put just "color" we don't know if it's the color of the axis label, or the crosshair that also has a color property, or other...

I hope this helps!

Best regards,
Jéssica

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Ah ok,

 so not for changing the same property on multiple things.

For levels, I just assumed you could use a dot notation, so "labels.style.color", good to know, and maybe good to add that to the description of that structure.

Dorine

2024-11-14 08-23-36
Melvin September

My forge asset to extend the update with a Gauge Chart has just been approved.
https://www.outsystems.com/forge/component-overview/15104/gauge-chart

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Still a lot to explore, but here's a trick I'd like to share.

This might not be explicitly mentioned in the documentation (couldn't immediately see it, but haven't read through all of it) :

Sometimes, the series of your chart are dynamic, you don't know up front what they will be or how many you will have.  For example, a chart counting tickets per month, split up in a series for every department.  You might not want to hardcode the departments.

In that case, it is possible to add a listwidget inside the addons placeholder of the chart, and put the series styling block inside that list.  

Just source that listwidget with a list of names and colors, for example to give each series another color.

how cool is that !

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Very cool indeed! Thanks for sharing this.

2018-09-27 18-20-33
Swatantra Kumar
Champion

Does it make use of highcharts?

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Yes it does, all OutSystems Charts do.