Chart

<sw-chart>

ready
The sw-chart component is a wrapper component for Apexcharts: https://apexcharts.com/

The main difference you need to know in difference to the native component is that you need only one data structure for all types of charts. This main data structure will be converted automatically to the right structure for each chart.
You have to use these structure (2.2 Category paired values): https://apexcharts.com/docs/series/
It is also used here in the example. The "x" values handles also String Values.

The wrapper component has a default options which takes care of a consistent look and feel of the charts and an easier usage. You can override all default options manually when you want.

Two helper functions can be useful in some use cases.
"fillEmptyDates": Fill each day from "options.xaxis.min" to "options.xaxis.max". When no "max" is defined the actual day will be used. The values have to be a timestamp in milliseconds.
"sort": The values in each series will be sorted in an ascending order.

Usage

Loading...
<sw-chart
    :type="'line'"
    :series="[
        {
          name: 'Saleschannel A',
          data:[
              {x:1559426400000, y:7},
              {x:1559512800000, y:6},
              {x:1559772000000, y:9},
              {x:1559599200000, y:0},
              {x:1559685600000, y:2}
        ]},
        {
          name: 'Saleschannel B',
          data:[
              {x:1559426400000, y:4},
              {x:1559512800000, y:2},
              {x:1559599200000, y:3},
              {x:1559685600000, y:0},
              {x:1559772000000, y:1}
        ]}
    ]"
    :options="{
        title: {
            text: 'Number of orders'
        },
        xaxis: {
            type: 'datetime',
            min: 1559260800000,
            max: 1559952000000
        },
        yaxis: {
            min:0,
            tickAmount:3,
            labels:{
                formatter: (value) => { return parseInt(value, 10);}
            }
        }
    }"
    :fillEmptyDates="true"
    :sort="true">
</sw-chart>

Component properties

Property name Type Default
type String
options Object
series Array
height Number 400
fillEmptyDates Boolean false
sort Boolean false

Methods

Method name Parameters
sortSeries series
addZeroValuesToSeries series
getZeroValues No parameters

Imports

  • vue-apexcharts
  • apexcharts/dist/locales/en.json
  • apexcharts/dist/locales/de.json
  • ./sw-chart.html.twig
  • ./sw-chart.scss

Twig blocks

  • sw_line_chart_multiple_chart
  • sw_line_chart_multiple
  • sw_line_chart_single
  • sw_line_chart