Charts

Line chart Example

Charts on this page use Chart.js - Simple yet flexible JavaScript charting for designers & developers.

Theme has built in React wrapper. You can find all chart components in src/components/charts folder.

import CustomLineChart from "../components/charts/CustomLineChart"

export default function page(props) {
  const data = {
    color: "blue",
    ticksColor: "blue",
    grid: true,
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
    ],
    label: "Data Set One",
    label2: "Data Set Two",
    values: [30, 50, 40, 61, 42, 35, 40],
    values2: [50, 40, 50, 40, 45, 40, 30],
    min: 30,
    max: 65,
  }
  return(
    <CustomLineChart className="w-100" {...data} />
  )
}

Line chart with primary gradient

Bar Chart

Donut Chart

import DonutChart from "../components/charts/DonutChart"

export default function page(props) {
  const data = {
    "color": "cyan",
    "cutout": "70%",
    "labels": ["Tasks Done", "Remaining"],
    "values": [250, 200]
  },
  return(
    <CustomLineChart className="w-100" {...data} />
  )
}

Donut Chart 2

import DonutChart from "../components/charts/DonutChart"

export default function page(props) {
  const data = {
    "color": "blue",
    "hideLegend": true,
    "labels": ["First", "Second"],
    "values": [300, 50]
  },
  return(
    <CustomLineChart className="w-100" {...data} />
  )
}

Bar Chart 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit

import BarChart from "../components/charts/BarChart"

export default function page(props) {
  const data = {
    "ticksColor": "primary",
    "label": "Sunny Days",
    "grid": false,
    "gradient": "pinkBlue",
    "labels": [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14"
    ],
    "values": [
      65, 59, 80, 81, 56, 55, 40, 30, 45, 80, 44, 36, 66, 58
    ],
    "min": 20,
    "max": 100,
    "hideLegend": true
  },
  return(
    <BarChart className="w-100" {...data} />
  )
}

Donut chart Example

import CustomDonutChart from "../components/charts/CustomDonutChart"

export default function page(props) {
  const data = {
    "cutout": "70%",
    "color": ["#0d6efd", "#3d8bfd", "#6ea8fe", "#9ec5fe"],
    "labels": ["Sandra", "Becky", "Julie", "Danny"],
    "values": [250, 50, 100, 40]
  },
  return(
    <CustomDonutChart className="w-100" {...data} />
  )
}

Pie chart Example

import PieChart from "../components/charts/PieChart"

export default function page(props) {
  const data = {
    "color": ["#6610f2", "#8540f5", "#a370f7", "#c29ffa"],
    "labels": ["John", "Mark", "Frank", "Danny"],
    "values": [300, 50, 100, 80]
  },
  return(
    <PieChart className="w-100" {...data} />
  )
}

Main

Docs