• What is an Area Chart?
• Data Format
• Variants of Area Charts
  • Spline Area Charts
  • Straight
  • Stepline
• Stacked Area Chart
• Using area in a combo chart
• Plotting an area time-series
• Styling Area Charts
  • Line width
  • Customizing the filled area
  • Fill types

Area Chart

What is an Area Chart? #

With their mountain-like appearance, Area Charts are used to represent quantitative variations. Be it examining the variation in the population of a tribe or determining the average performance of the students. Area charts differ from line charts because the area bounded by the plotted data points is filled with shades or colors.
In this area chart guide, we will go through the configuration and options to plot different kinds of area graphs available in ApexCharts.

Data Format #

The data format for the area chart is the same as for the other XY plots. You will need to provide the data in table format.

Variants of Area Charts #

Spline Area Charts #

In a Spline area chart, the data-points are connected by smooth curves.

To draw such a smooth curve, you have to set the following option

\koolreport\apexcharts\AreaChart::create(array(\
    "options" => [
        'stroke' => [
            'curve' => 'smooth',
        ]

Straight #

Connect the data-points in a straight line and not apply any curve to the line.

\koolreport\apexcharts\AreaChart::create(array(\
    "options" => [
        'stroke' => [
            'curve' => 'straight',
        ]

Stepline #

In a step-line area chart, points are connected by horizontal and vertical line segments, looking like steps of a staircase and the area is filled with color.

\koolreport\apexcharts\AreaChart::create(array(
    "options" => [
        'stroke' => [
            'curve' => 'stepline',
        ]

Stacked Area Chart #

Stacked area charts work in the same way as simple area charts do, except that the start of each data-point continues from the point left by the previous data series.

To enable stacking of a chart, you should set the following configuration

\koolreport\apexcharts\AreaChart::create(array(
    "stacked" => true

Using area in a combo chart #

With ApexCharts, you can plot area series with other chart types. The below examples give an idea of how an area series can be combined with other chart types to create a mixed/combo chart.

• area/column/line
• area/line

You have to specify the chartType in the column array when building a combo chart like this.

\koolreport\apexcharts\ComboChart::create(array(
    "columns" => array(
        "Date" => [],
        "Series A" => [
            "chartType" => "area"
        ],
        "Series B" => [
            "chartType" => "line"
        ]
    ),  

Plotting an area time-series #

A time-series graph is a data viz tool that plots data values at progressive intervals of time. With ApexCharts, a time-series is created if you provide timestamp values in the series as shown below and set the first column's categoryType to 'datetime'.

\koolreport\apexcharts\LineChart::create(array(
    "columns" => array(
        "date" => [
            "label" => "Date",
            "categoryType" => "datetime",
        ],
        "value" => array(
            "label" => "Stock Price",
            "type" => "number",
        ),      

Styling Area Charts #

With ApexCharts, you can give your desired look to your area graphs and enhance the look of your dashboard design. We will go through options like setting colors of the lines, changing colors of the filled area, changing opacity as well as using different filling methods to fill the SVG paths.

Line width #

Changing the width of the line is easy.

\koolreport\apexcharts\AreaChart::create(array(
    "options" => [
        'stroke' => [
            'dashArray' => 2
        ]

Customizing the filled area #

To change the color of the lines in your graphs, you just have to modify the colors property in the configuration. If you want to use predefined theme palettes, you can use the options|theme|palette option of the themes.

\koolreport\apexcharts\AreaChart::create(array(
    'colors' => ['#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800']

\koolreport\apexcharts\AreaChart::create(array(
    "options" => [
        'theme' => [
            'palette' => 'palette1', // from 'palette1', 'palette2',... to 'palette10'
        ]

Fill types #

Configure the SVG paths by specifying whether to fill the paths with solid colors or gradient or pattern.

\koolreport\apexcharts\AreaChart::create(array(
    "options" => [
        'fill' => [
            'type' => 'gradient' // 'solid' | 'pattern' | 'image'
        ]