Chart

The chart component relies on the Chart.js library to display various aesthetically pleasing types of charts. The bar chart is the default but changing the type of chart is as simple as setting the type attribute to any of the acceptable chart types provided by Chart.js.

    <?php
        $labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple'];
        $data = [12, 19, 13, 15, 9, 10];

    
        <x-bladewind::chart :labels="$labels" :data="$data" title="Colour ranks" />
    

Common Chart Options

There are four top level options in the Chart.js configuration. These are type, data, options and plugins. BladewindUI offers attributes that correspond to each of the above mentioned options in the Chart.js top level. Passing each attribute expects you to have defined the data in a format Chart.js expects. For example, whatever array you pass into the data attribute will simply be formatted into JSON and passed to Chart.js as shown below.

    
    // chart.js configuration
    const config = {
        type: '{{$type}}',
        // $data was passed as an attribute to the chart component
        data: @json($data),
        options: @json($options),
        plugins: @json($plugins)
    }
    

BladewindUI however, exposes a few common chart options that can be passed as attributes for convenience. The list is provided below.

<x-bladewind::chart
    type="bar"
    :labels="$labels"
    :data="$data"
    title=""
    show_legend="false"
    show_borders="false"
    show_axis_lines="false"
    show_axis_labels="false" />

Chart Types

Area Chart

Set type="area" to display an area chart.

<x-bladewind::chart
    type="area"
    :labels="$labels" :data="$data" show_legend="false" />

Bar Chart

Set type="bar" to display a bar chart. This is the default.

<x-bladewind::chart
    type="bar"
    :labels="$labels" :data="$data" show_legend="false" />

Bubble Chart

Set type="bubble" to display a bubble chart.

$bubble_labels = [];
$bubble_data = [
    ['x' => 5, 'y' => 10, 'r' => 8],
    ['x' => 10, 'y' => 15, 'r' => 6],
    ...
    ['x' => 85, 'y' => 26, 'r' => 7],
    ['x' => 100, 'y' => 30, 'r' => 10],
];

<x-bladewind::chart
    type="bubble"
    bg_color="rgba(153, 102, 255, 0.5)"
    border_color="rgb(153, 102, 255)"
    :labels="$bubble_labels" :data="$bubble_data" show_legend="false" />

Doughnut Chart

Set type="doughnut" to display a doughnut chart.

<x-bladewind::chart
    type="doughnut"
    :labels="$labels" :data="$data" show_legend="false" />

Line Chart

Set type="line" to display a line chart.

<x-bladewind::chart
    type="line" border_width="5"
    :labels="$labels" :data="$data" show_legend="false" />

Pie Chart

Set type="pie" to display a pie chart.

<x-bladewind::chart
    type="pie"
    :labels="$labels" :data="$data" show_legend="false" />

Polar Chart

Set type="polar" to display a polar chart.

<x-bladewind::chart
    type="polar"
    :labels="$labels" :data="$data" show_legend="false" />

Radar Chart

Set type="radar" to display a radar chart.

$radar_labels = ['Speed', 'Strength', 'Agility', 'Endurance', 'Skill'];
$radar_data = [65, 59, 90, 81, 56]

<x-bladewind::chart
    type="radar"
    bg_color="rgba(54, 162, 235, 0.3)"
    border_color="#36A2EB" border_width="2"
    :labels="$radar_labels" :data="$radar_data" show_legend="false" />

Scatter Chart

Set type="scatter" to display a scatter chart.

$scatter_labels = [];
$scatter_data = [
    ['x' => -15, 'y' => 10],
    ['x' => -5, 'y' => 5],
    ...
    ['x' => 30, 'y' => 13],
    ['x' => 32, 'y' => 10],
]

<x-bladewind::chart
    type="scatter"
    :labels="$scatter_labels" :data="$scatter_data" show_legend="false" />

Scatter charts can have lines connecting the dots. This is turned off by default and can be displayed by setting show_line="true". This attribute only applies to scatter charts.

<x-bladewind::chart
    type="scatter" show_line="true"
    :labels="$scatter_labels" :data="$scatter_data" show_legend="false" />

Mixed Charts

To define a mixture of chart types, you need to create your own chart data array that includes data for all the chart types you want to display. You then pass this array to the data attribute. See this page for more details.

$data = [
    "labels" => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    "datasets" => [
        [
            'type' => 'bar',
            'label' => 'Sales',
            'data' => [10, 20, 30, 25, 15],
            'backgroundColor' => 'rgba(54, 162, 235, 0.2)',
            'borderColor' => 'rgb(75, 192, 192)',
        ],
        [
            'type' => 'line',
            'label' => 'Trend',
            'data' => [12, 18, 28, 22, 17],
            'borderColor' => '#FF6384',
            'borderWidth' => 2,
            'fill' => false,
        ]
    ]
];

<x-bladewind::chart :data="$data"  />

Chart Data

All data is passed to the chart via the data attribute, but there are two ways to define this data.

Option 1

This requires you to set values for both the labels and data attributes. The data in this case should only be the data points to be displayed in the chart. Each data point is matched against a corresponding label depending on the type of chart being displayed.

    <?php
        $labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple'];
        $data = [12, 19, 13, 15, 9, 10];

    
        <x-bladewind::chart :labels="$labels" :data="$data" />
    

Option 2

This requires you to define the entire chart datasets in an array and pass that to the data attribute. This option is recommended if you require more flexibility with the properties you want to define in the Chart.js configurations. When using this option, the only attributes available to the chart component are data, options and plugins. All other attributes are ignored since they will need to be defined in your data array.

<?php
$data = [
    "labels" => ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    "datasets" => [
        [
            'type' => 'bar',
            'label' => 'Sales',
            'data' => [10, 20, 30, 25, 15],
            'backgroundColor' => 'rgba(54, 162, 235, 0.2)',
            'borderColor' => 'rgb(75, 192, 192)',
        ],
        [
            'type' => 'line',
            'label' => 'Trend',
            'data' => [12, 18, 28, 22, 17],
            'borderColor' => '#FF6384',
            'borderWidth' => 2,
            'fill' => false,
        ]
    ]
];

<x-bladewind::chart :data="$data"  />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Chart component.

Chart with all attributes defined

    <x-bladewind::chart
        :labels="$labels"
        :data="$data"
        :options="$options"
        :plugins="$plugins"
        name="population"
        type="line"
        bg_color="green"
        border_color="yellow"
        border_width="3"
        show_axis_lines="false"
        show_axis_labels="false"
        show_borders="false"
        show_legend="false"
        title="Population Distribution" />