Line, Area and Bar Chart

A JavaScript Mixed Chart or a Combo Chart is a visualization that allows the combination of two or more distinct graphs. The features of each chart are retained on the mixed chart plot. Different scales of measure are present on the mixed chart and with this; it is an ideal plot for presenting data values that are usually difficult to combine because of the significant difference in value ranges. Generally, a combo chart makes it possible to view the relationship, differences, deviations, and anomalies between a different set of data by bringing them on a single plot.

You can find a more in depth explanation about the line, area and bar on this page:

https://apexcharts.com/javascript-chart-demos/mixed-charts/

Properties of Line & Bar Chart

Property Name

Data type

Type

Description

Data source

List

Data Model

Data list source for the widget.

X axis category

Text

Expression

Text categories displayed on x-axis.

Y axis value

Number

Expression

Numeric values displayed on y-axis.

Series

Text

Expression

This field is used to create different series from the same data source.

It's not required.

Series Color

Text

Expression

This field is used to set the colour of the series. If empty a random colour will be selected.

Logarithmic scale

Boolean

Expression

Change scale to logarithmic scale.

Custom scale

Boolean

Change scale to a custom scale with custom properties.

Use Opposite Scale

Boolean

Expression

Changes position of y axis values to the opposite position.

Max scale value

Number

Expression

Maximum value for the scale.

Min scale value

Number

Expression

Minimum value for the scale.

Tick scale amount

Number

Expression

Number of visual ticks for the scale.

Show tooltip

Boolean

Expression

Show tooltip. Use true or false.

Label decimals

Number

Expression

Set number of decimals displayed for y-axis values.

Theme

Text

Dropdown

Change the text and background colors of the chart.

Background color

Text

Expression

Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.

Examples:

"#FFFFFF60" or "rgba(255, 255, 255, 0.6)".

Grid lines vertical

Boolean

Expression

Display vertical lines on the grid.

Grid lines horizontal

Boolean

Expression

Display horizontal lines on the grid.

Grid lines color

Text

Expression

hange color of the lines on the grid.

Example:

"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"

Legend font size

Number

Expression

Change font size of the legend.

Legend position

Text

Dropdown

Change position of the legend. (Bottom, left, top, right).

Chart type

Text

Dropdown

Select a different type of chart. (Bar, line, area).

Fill type

Text

Dropdown

Change fill type of the chart. (Solid, gradient, pattern).

Fill opacity

Number

Expression

Change the fill opacity of the chart.

From 0.00 to 1.00

Prefix

Text

Expression

Display a prefix for values on tooltip.

Postfix

Text

Expression

Display a postfix for values on tooltip.

Show animation

Boolean

Expression

Display animation on render.

Height

Number

Expression

Set height of the chart.

Type number.

Width

Number

Expression

Set width of the chart.

Type number.

Last updated