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