Bar Chart

A bar chart provides a way of showing data values represented as vertical bars.

Importing

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

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

Basic Usage

Data to chart can be passed throught data prop and any additional options can be passed by options prop. All options will be merged with basic options from bar chart. See Chart.js docs (opens new window) for more information about how to use bar charts.

<template>
  <ci-bar-chart
    id="bar-chart"
    :data="{
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [
        {
          data: [12, 9, 2, 5, 8, 7],
          backgroundColor: '#1243BA'
        }
      ]
    }"
  />
</template>

Stacked chart

Multiple datasets can be stacked by passing custom options in options prop.

<template>
  <ci-bar-chart
    id="bar-chart"
    :data="{
      labels: ['20/01', '21/01', '22/01', '23/01', '24/01', '25/01'],
      datasets: [
        {
          label: 'Year 1',
          data: [12, 9, 2, 5, 8, 7],
          backgroundColor: '#1243BA'
        },
        {
          label: 'Year 2',
          data: [22, 1, 21, 7, 0, 12],
          backgroundColor: '#7EA3FF'
        }
      ]
    }"
    :options="{
      scales: {
        x: { stacked: true },
        y: { stacked: true }
      }
    }"
  />
</template>

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-bar-chart
    id="bar-chart"
    :data="{
      labels: ['Apple', 'Banana', 'Orange', 'Citrus', 'Avacado', 'Potatoe', 'Cucumber'],
      datasets: formattedDatasets
    }"
  />
</template>
<script>

export default {
  data() {
    return {
      factory: new Utils.Colors.ColorFactory({
        colorSet: [
          '#FC7C91',
          '#FC4C69',
          '#FC2B4E',
          '#FD0E35',
          '#E60E32',
          '#BA0B28',
          '#8A081E'
        ]
      }),
      datasets: [
        {
          data: [1, 2, 3, 4,5,6,7]
        },
        {
          data: [7, 11, 2, 22,5,6,7]
        }
      ]
    };
  },

   computed: {
    formattedDatasets () {
      return this.datasets.map((dataset, index) => {
        return {
          ...dataset,
          backgroundColor: index === 0 ? this.factory.next() : this.factory.rnd()
        }
      });
    }
  }
}
</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-bar-chart
        id="bar-chart"
        :data="{
          labels: ['20/01', '21/01', '22/01', '23/01', '24/01', '25/01'],
          datasets: [
            {
              label: 'Year 1',
              data: [12, 9, 2, 5, 8, 7],
              backgroundColor: '#1243BA'
            },
            {
              label: 'Year 2',
              data: [22, 1, 21, 7, 0, 12],
              backgroundColor: '#7EA3FF'
            }
          ]
        }"
        :options="{
          scales: {
            x: { stacked: true },
            y: { stacked: true }
          }
        }"
        :loading="loading"
      />
    </div>
    <ci-button @click="loading = !loading">
      Toggle Loading
    </ci-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      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-bar-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>