This example demonstrates a Line chart with varying line types and styles.

Maximum Width & Height - Chart-level attributes Maximum Width and Height have been set to 500px and 450px respectively, to size the chart within its region. If you wish to default to using 100% width and height of the given region, simply remove these values, and utilitise the Template Options of the region to control the height as you wish.

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.

Chart Type - Through the use of Dynamic actions, use the Bar/Area/Line/Line with Area/Combo buttons to the top right of the chart to change the type of 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.

Label Position - Use this series-level attribute to control the positioning of the labels on data items of the chart.

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

This example demonstrates a Line chart with font formatting applied to the axes, values, and legend text, declaratively.

X-Axis Title - The axis-level Title attributes Font Family, Font Style, Font Size and Font Color have been set to style the x-axis title to use the font Comic Sans MS, the font style Normal, the font size 16px, and the font color #F544F5.
X-Axis Tick Labels - The axis-level Tick Label attributes Font Family, Font Style, and Font Color have been set to style the x-axis labels to use the font Courier, the font style Normal, and the font color #2323EB.

Y-Axis Title - The axis-level Title attributes Font Family, Font Style, Font Size and Font Color have been set to style the y-axis title to use the font Times, the font style Italic, the font size 14px, and the font color green.
Y-Axis Tick Labels - The axis-level Tick Label attributes Font Family, Font Style, and Font Color have been set to style the y-axis labels to use the font Helvetica, the font style Oblique, the font size 14px, and the font color #F59D5A.

Legend Text - The chart-level Legend attributes Font Family, Font Style, and Font Color have been set to style the Legend text to use the font Trebuchet MS, the font style Italic, and the font size 12px.

Store A Series - The series-level Label attributes Font Family and Font Color have been set to style the values of the series using the font Comic Sans MS, and the font color to #FA1238.
Acme Series - The series-level Label attributes Font Family and Font Color have been set to style the values of the series using the font Comic Sans MS, and the font color to #3966ED.
Shop C Series - The series-level Label attributes Font Family and Font Color have been set to style the values of the series using the font Comic Sans MS, and the font color to #8A3232.

This example demonstrates a Line chart with two buttons on the region, allowing the user to show or hide the data labels on the chart, via Dynamic Actions.

Hide Labels button - Use the following JavaScript code in a dynamic action triggered by the Click action of this button:

// Retrieve the series array from the chart - using the 'option' API
var series = apex.region("lineChartLabels").call( "option", "series" );

// Set the labelPosition property for the series items
for ( i = 0; i < series.length; i++ ) {
    for ( j = 0; j < series[ i ].items.length; j++ ) {
        series[ i ].items[ j ].labelPosition = "none";    
    }
}

// Invoke the refresh method to update the DOM
apex.region("lineChartLabels").widget().ojChart('refresh');

Show Labels button - Use the following JavaScript code in a dynamic action triggered by the Click action of this button:

// Retrieve the series array from the chart - using the 'option' API
var series = apex.region("lineChartLabels").call( "option", "series" );

// Set the labelPosition property for the series items
for ( i = 0; i < series.length; i++ ) {
    for ( j = 0; j < series[ i ].items.length; j++ ) {
        series[ i ].items[ j ].labelPosition = "aboveMarker";
        // Set item[].label attribute to the value to be rendered as the label
        series[ i ].items[ j ].label = series[ i ].items[ j ].value;
    }
}

// Invoke the refresh method to update the DOM
apex.region("lineChartLabels").widget().ojChart('refresh');

For more information on the JET chart options, refer to the Oracle JET ojChart API.

For more information on labelPosition settings, refer to the Oracle JET ojChartItem API example.

This example demonstrates how to customize a Line chart to apply a Reference Object, via JavaScript code customizations.

JavaScript Code - Use this chart-level attribute to customize your chart attributes and data. Any chart initialization changes, to attributes such as the chart y-axis, type, or orientation, can also be made. The JavaScript Code should follow a template similar to the following:

function( options ) {

    // Define Reference Object line on Y Axis of chart
    var constantLineY = [ {text:"Reference Object", type: "line", value: 50, color: "#A0CEEC", displayInLegend: "on", lineWidth: 3, location: "back", lineStyle: "dashed", shortDesc: "Sample Reference Line"}];
    
    // Set the referenceObjects option as part of the chart initialization
    options.yAxis.referenceObjects = constantLineY;
    
    return options;
}

For more information on the JET chart options, refer to the Oracle JET ojChart API.

For more information on Reference Object settings, refer to the Oracle JET Cookbook Line Chart: Reference Objects example.

This example demonstrates a Line chart with a time axis, and numeric and date formatting.

Maximum Width & Height - Chart-level attributes Maximum Width and Height have been set to 500px and 450px respectively, to size the chart within its region. If you wish to default to using 100% width and height of the given region, simply remove these values, and utilitise the Template Options of the region to control the height as you wish.

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.

Initial Zooming - Use the chart-level attribute to set the initial zooming behavior of the chart, to focus initial attention on a specific section of the chart. The setting for this example is First, to initially zoom to the first data points 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.

Format - Use the axis-level attribute to define currency formatting on the y-axis, and date formatting on the x-axis. New in APEX 18.1 is the ability to leave the Currency property empty, to allow for the currency symbol to be automatically derived from the application language.

For more information on the Time Axis settings, refer to the Oracle JET Cookbook Chart: Time Axis example. For additional examples of time axis settings, refer to the Combination examples.