Chart

Roughness does not provide any chart component. We recommend you to use vue-chartjs, chart.js and chartjs-plugin-roughness.

npm i vue-chartjs chart.js chartjs-plugin-roughness

Usage

import 'chartjs-plugin-roughness'
import { BarElement, CategoryScale, Chart, LinearScale } from 'chart.js'

// for bar charts
Chart.register(BarElement, CategoryScale, LinearScale)

Chart.defaults.font.family = '\'Cabin Sketch\', cursive'

Example

Show Code

<script lang="ts" setup>
import { useColors } from 'roughness'
import { computed } from 'vue'
import { Bar } from 'vue-chartjs'

const colors = useColors()

const chartData = computed(() => ({
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      data: [40, 20, 12],
      borderColor: [
        colors.value.primaryColor,
        colors.value.textColor,
        colors.value.errorColor,
      ],
      backgroundColor: [
        colors.value.primaryColor,
        colors.value.textColor,
        colors.value.errorColor,
      ],
    },
  ],
}))

const chartOptions = computed(() => ({
  responsive: true,
  scales: {
    x: {
      ticks: {
        color: colors.value.textColor,
      },
    },
    y: {
      ticks: {
        color: colors.value.textColor,
      },
    },
  },
}))
</script>

<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>