Area Chart

An area chart has a similar styling with line chart, but with gradient coloring on the area below the lines.

Importing

For code splitting optimizations, Charts are exported separately and must be imported as shown here:

import { CiAreaChart } from '@ci/stratus-components/build/charts'

Basic Usage

To use this component different importing approach needs to be used. Please see this page for more information.

<template>
  <ci-area-chart :data="chartData" />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [
          {
            label: "Data point 1",
            data: [10, 70, 30, 50],
          },
        ],
      },
    };
  },
};
</script>

Multiple data points

Supply more datasets object to generate more visual data points:

<template>
  <ci-area-chart :data="chartData" />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [
          {
            label: "Data point 1",
            data: [10, 70, 30, 50],
          },
          {
            label: "Data point 2",
            data: [15, 73, 20, 80],
          },
          {
            label: "Data point 4",
            data: [8, 90, 40, 22],
          },
        ],
      },
    };
  },
};
</script>

Custom colors

To have each dataset have unique color we can use util called ColorFactory by passing colorSet of colors inside constructor and using it inside our format function, that adds color to datasets.

<template>
  <ci-area-chart
    :data="{
      labels: ['Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: formattedDatasets
    }"
  />
</template>
<script>

export default {
  data() {
    return {
      factory: new Utils.Colors.ColorFactory({
        colorSet: [
          '#FC7C91',
          '#2159F8',
          '#7CB342'
        ]
      }),
      datasets: [
        {
          data: [1, 2, 3, 4, 5]
        },
        {
          data: [7, 11, 2, 22]
        }
      ]
    };
  },

   computed: {
    formattedDatasets () {
      return this.datasets.map((dataset, index) => {
        return {
          ...dataset,
          backgroundColor: index === 0 ? this.factory.next() : this.factory.rnd()
        }
      });
    }
  }
}
</script>

Supplying custom options

Chart options can be passed into the :options prop and will be merged with the default options. See the options object documentation (opens new window) for a complete list of configurable options. Here is an example of configuring the tooltip's text with ChartJsHelpers that is available in the Utils module:

<template>
  <ci-area-chart :data="chartData" :options="chartOptions" />
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            callbacks: {
              label: Utils.ChartJsHelpers.defaultTooltipLabel
            }
          }
        }
      },
      chartData: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [
          {
            label: "Quota",
            data: [100000, 25700, 20499, 60044],
          },
        ],
      },
    };
  },
};
</script>

Loading State

Pass a boolean into the loading prop to add a loading state to the component. The boolean hides chart datasets.data. This can be useful if you need to fetch data asynchronously

<template>
  <div>
    <div>
      <ci-area-chart
        :data="chartData"
        :loading="loading"
      />
    </div>
    <ci-button @click="loading = !loading">
      Toggle Loading
    </ci-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [
          {
            label: "Data point 1",
            data: [10, 70, 30, 50],
          },
          {
            label: "Data point 2",
            data: [15, 73, 20, 80],
          },
          {
            label: "Data point 4",
            data: [8, 90, 40, 22],
          },
        ],
      },
      loading: false
    };
  },
};
</script>

No data text

To change text that is displayed when dataset is empty use prop noDataText by default it is set to No data to display.

<template>
  <div>
    <div>
      <ci-area-chart 
        :data="allChartData" 
        :loading="loadingState"
        noDataText="Custom no data text"
      />
    </div>
    <ci-button @click="toggleEmptyDataSetState">
      Toggle empty state
    </ci-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingState: false,
      allChartData: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [
          {
            label: "Data point 22",
            data: [1, 2, 3, 4],
          },
        ],
      },
    };
  },
  methods: {
    toggleEmptyDataSetState () {
      this.loadingState = true

      if (this.allChartData.datasets.length) {
        this.allChartData.datasets = []
      } else {
        this.allChartData.datasets.push({
          label: "Data point 22",
          data: [1, 2, 3, 4]
        })
      }

      setTimeout(() => {
        this.loadingState = false
      }, 100)
    }
  }
};
</script>