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 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 Type - Use the axis-level attribute to define currency formatting on the y-axis, and date formatting on the x-axis.

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.