Skip to main content

 

Logic

 

 

OutSystems

How to combine a line graph with a bar chart

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Question

    How do I create a chart that is a combination of line graph and bar chart?

    Answer

    OutSystems Platform relies on Highcharts to create charts. Craft custom JSON to customize the action AdvancedFormat_Init from Charts:

    • Define the two Y axis in the property HighchartsJSON;

    • Display a data series as a line associated with the second Y axis, using the property DataSeriesFormats.

    The example below uses DataPoint_Init to generate data for a ColumnChart. Each point defines:

    • The label in the X axis, for example "Jun-14";

    • The value, for example 180;

    • The data series of the data, for example "Birth Certificate".

    image alt text

    The example JSON below defines two Y axis:

    • A primary Y axis, untitled;

    • A secondary Y axis, untitled, in the opposite side of the chart, with a different labels formatted as percentages.

    yAxis: [
    
      { // Primary yAxis
          title: { text: '' },
      },
      { // Secondary yAxis
           title: { text: '' },
           labels: { format: '{value} %' },
           opposite: true
      }
    ]
    

    The example below initializes an AdvandedDataSeriesFormat to customize a data series.

    • Defines the name of the data series as "% Self-service";

    • Displays the data series as a line;

    • Associates the data series with the second Y axis.

    The customization must then be packed into a list.

    image alt text

    The sample action AdvancedFormat_Init sets the advanced customizations:

    image alt text

    Finally, the ColumnChart refers to the the AdvancedFormat:

    image alt text

    More Information

    An example of a combination line and bar chart in Highcharts, the underlying platform for charts in OutSystems.

    The component Line and Pie Graphs enhancements on the OutSystems Forge enhances some platform graphs.

    • Was this article helpful?