Line Chart

A line chart provides a way of showing data values represented as lines.

Importing

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

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

Basic Usage

Use the data prop to pass in your datasets and labels. See the chart.js docs (opens new window) for more information.

Use the options prop to pass options to your chart. These will be merged with the Line Chart's default options. See the chart.js docs (opens new window) for more information.

<template>
  <ci-line-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-line-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-line-chart
    :data="{
      labels: ['Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: formattedDatasets
    }"
  />
</template>
<script>

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

   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-line-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-line-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-line-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>