This example demonstrates a Line with Area chart with dual Y-axes. Dual-Y charts are useful for conveying relationships between series data that use different units or magnitudes of measurement.

Hide and Show behavior - The legend uses the With Rescale, allowing a user to hide and unhide a series by clicking the chart legend markers. This allows the user to focus on specific series that are interesting to them. The chart axes will rescale as the minimum and maximum values of the visible data increase or decrease. This can be useful for series with largely varying values.

Orientation - Through the use of Dynamic actions, use the Horizontal/Vertical button to the top left of the chart to change the orientiation of the data items on the charts, and the Stack/Unstack buttons to the top right of the chart to render the Store A and Acme Store series data as stacked or unstacked.

Assigned to Y2 - Use this series-level attribute to associate a given chart series to an extra Y axis on the chart.

Line Style & Type - Use the series-level attributes to define various line styles, such as dotted, and types, such as curved, to the chart.

Marker - Use the series-level attribute to define various markers to the data items rendered on the chart.

For more information on the Line chart settings, refer to the Oracle JET Cookbook Line with Area Chart: Data Labels and Line with Area Chart: Line Types examples.

This example demonstrates various attributes of a Stacked Line with Area chart, with values represented in percent.

Format - To represent your data as percent value on a Stacked Bar Chart, you must set this y-axis level attribute to Percent. The associated attributes Minimum and Maximum must be set to 0, and 1 respectively. This will ensure the y-axis renders from 0% to 100%. When a format of 'Percent' is used, Oracle JET interprets a value of 1 = 100%. On a Stacked Percent Bar chart, Oracle APEX will automatically calculates the fractional values for the chart series, based on the sum of the values within each group. This allows Oracle JET to accurately represent the data in percent format on the stacked chart.

Hide and Show Behavior - This chart-level attribute can be used to support hide and show behavior using the chart legend. The option With Rescale Hide and Show behavior, allows a user to hide and unhide a series by clicking the chart legend markers. This allows the user to focus on specific series that are interesting to them. NOTE: The chart axes will not rescale on a stacked chart displaying percent values. The y-axis will remain representing 0% - 100%.

This example demonstrates a multi-series Line with Area chart, where each series has a different number of data points. Oracle JET requires that each series of a multi-series chart contains a data point for each label that is displayed on the x-axis. With APEX 5.1.3, we introduced automatically filling in of any gaps in a given series, to densify the data and ensure the resulting data can be rendered correctly by Oracle JET. In APEX 18.1, we introduced two new declarative options, to allow you to control whether the densification should be applied to your multi-series chart, and the sort order of the chart data. The options are:

• Fill Gaps in Chart Data: by default, this is set to Yes, to indicate that the data densification logic will be applied to your multi-series chart.
• Sort Order: by default, this is set to Label - Ascending. The option is only available for a multi-series chart, where the Fill Gaps in Chart Data attribute has been set to Yes.

Note that multi-series charts using the attribute Time Axis Type setting of Mixed Frequency or Skip Gaps will not be densified, to respect the intended behavior of the Oracle JET 'Time Axis Type' attribute.

For more information on the Line chart settings, refer to the Oracle JET Cookbook Line with Area Chart: Data Labels and Line with Area Chart: Line Types examples.

This example demonstrates a multi-series Line with Area chart, where the tooltip labels have been customized to overwrite the default labels. This is achieved by adding JavaScript code to the the JavaScript Initialization Code attribute of the chart:

• JavaScript Initialization Code - use the following JavaScript code to overwrite the default 'Series', 'Group', and 'Value' labels displayed in the tooltip, which is visible when hovering over a data point of a series:

  function( options ){
  
      //  Add formatting for group
      options.valueFormats.group = { tooltipLabel: 'Customer' };
      //  Add formatting for series
      options.valueFormats.series = { tooltipLabel: 'Product' };
      //  Update formatting for value to include the new label
      $.extend( options.valueFormats.value, { tooltipLabel: 'Amount' }); 
      
      return options;
  
  }
  

  For more information on the tooltip label settings, refer to the Oracle JET Cookbook valueFormats.value.tooltipLabel, valueFormats.group.tooltipLabel and valueFormats.series.tooltipLabel examples.