• Data Format
  • Combining a line chart with a range area chart

Range Area Chart

Range Area Chart is an extension of the standard area chart. It looks like a standard area chart but with an added visual representation of the range between the minimum and maximum values. They can be utilized to display ranges such as high and low stock prices over a specific time period, the maximum and minimum temperatures for different regions, or the minimum and maximum salaries in a company.

When plotting a range area chart, you need to set chart.type: 'rangeArea' in the configuration.

Data Format #

The data format for range-area is slightly different than other charts. ApexCharts assumes that your data is in the 2-dimension vector [Minimum, Maximum] format. To create a multi-dimensional vector value, you can use a column's combination property as given in the below example:

$data = [
    [
        'month',
        'temp_min',
        'temp_max',
    ],
    [
        "Jan",
        -2,
        4
    ],
    [
        "Feb",
        -1,
        6
    ],
    ...
];
\koolreport\apexcharts\RangeAreaChart::create(array(
    "dataSource" => $data,
    "columns" => array(
        "month" => [
            "label" => "Month"
        ],
        'temp_range' => [
            "label" => "Temperature Range",
            'combination' => [
                "temp_min",
                "temp_max"
            ]
        ]
    ),

Combining a line chart with a range area chart #

You can use create a combo chart and create a low/median/high values visualization by including a line insight range area chart. Below is such an example

\koolreport\apexcharts\ComboChart::create(array(
    "columns" => [
        'month' => [
            'label' => 'Month',
        ],
        'Team_A_range' => [
            'label' => 'Team A range',
            'combination' => [
                'Team_A_min',
                'Team_A_max'
            ],
            'chartType' => 'rangeArea',
        ],
        'Team_A_med' => [
            'label' => 'Team A median',
            'chartType' => 'line',
        ],
    ],