Skip to main content

Chart

The TkChart component allows users to visualize data in various chart formats using Chart.js.

import { TkChart } from '@takeoff-ui/react'

Bar​

A simple bar chart.

View Code
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      data: [1, 10, 5, 2, 20, 32, 45],
    },
  ],
};
const options = {
  scales: {
    x: {
      border: {
        display: false,
      },
      grid: {
        display: false,
        drawTicks: false,
      },
    },
    y: {
      ticks: {
        padding: 14,
      },
      border: {
        color: '#E1E4EA',
        width: 1,
      },
      grid: {
        display: false,
        drawTicks: false,
      },
    },
  },
};
<TkChart type="bar" data={data} options={options} />

Multiple Bar​

A multiple bar chart.

View Code
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      data: [1, 10, 5, 2, 20, 32, 45],
    },
    {
      label: 'My Second dataset',
      data: [2, 12, 7, 4, 25, 35, 43],
      backgroundColor: 'red',
    },
  ],
};
const options = {
  scales: {
    x: {
      border: {
        display: false,
      },
      grid: {
        display: false,
        drawTicks: false,
      },
    },
    y: {
      ticks: {
        padding: 14,
      },
      border: {
        color: '#E1E4EA',
        width: 1,
      },
      grid: {
        display: false,
        drawTicks: false,
      },
    },
  },
};
<TkChart type="bar" data={data} options={options} />

Pie​

A simple pie chart.

View Code
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'My First dataset',
      data: [1, 10, 5, 2, 20, 32],
      backgroundColor: [
        '#F5F9FF',
        '#D0E1FD',
        '#ABC9FB',
        '#3B82F6',
        '#295BAC',
        '#204887',
      ],
    },
  ],
};
const options = {
  plugins: {
    legend: {
      labels: {
        usePointStyle: true,
      },
    },
  },
};
<TkChart type="pie" data={data} options={options} />

Doughnut​

A simple doughnut chart.

View Code
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'My First dataset',
      data: [1, 10, 5, 2, 20, 32],
      backgroundColor: [
        '#F5F9FF',
        '#D0E1FD',
        '#ABC9FB',
        '#3B82F6',
        '#295BAC',
        '#204887',
      ],
    },
  ],
};
const options = {
  plugins: {
    legend: {
      labels: {
        usePointStyle: true,
      },
    },
  },
};
<TkChart type="doughnut" data={data} options={options}/>

Semi-Doughnut​

A simple semi-doughnut chart.

View Code
const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
        {
            label: 'My First dataset',
            data: [1, 10, 5, 2, 20, 32],
            backgroundColor: [
                '#F5F9FF',
                '#D0E1FD',
                '#ABC9FB',
                '#3B82F6',
                '#295BAC',
                '#204887',
            ],
        },
    ],
};
const options = {
    cutout: '90%',
    rotation: 225,
    circumference: 270,
    plugins: {
        legend: {
            labels: {
                usePointStyle: true,
            },
        },
    },
};
<TkChart type="doughnut" data={data} options={options}/>

Line​

A simple line chart.

View Code
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'My First dataset',
      data: [1, 10, 5, 2, 20, 32],
      borderColor: '#3B82F6',
      tension: 0.5,
    },
  ],
};
const options = {
  scales: {
    y: {
      grid: {
        display: false,
        drawTicks: false,
      },
    },
    x: {
      border: {
        display: false,
      },
      grid: {
        display: false,
        drawTicks: false,
      },
    },
  },
};
<TkChart type="line" data={data} options={options} />

Plugin​

A plugin for the chart.

View Code
import React, { useRef, useState, useCallback, useMemo } from 'react';
import { TkChart } from '@takeoff-ui/react';

const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
        {
            label: 'My First dataset',
            data: [1, 10, 5, 2, 20, 32],
            backgroundColor: [
                '#F5F9FF',
                '#D0E1FD',
                '#ABC9FB',
                '#3B82F6',
                '#295BAC',
                '#204887',
            ],
        },
    ],
};

const centerTextPlugin = {
    id: 'centerText',
    beforeDraw(chart: any) {
        const { width, height, ctx } = chart;
        ctx.save();
        const data = chart.data.datasets[0].data;
        const total = data.reduce((a: number, b: number) => a + b, 0);
        const selected = chart.options.plugins?.centerText?.selectedIndex ?? null;
        const value = selected !== null ? data[selected] : total;
        const label = selected !== null ? chart.data.labels[selected] : 'Total';
        ctx.font = 'bold 22px Geologica, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#222530';
        ctx.fillText(String(value), width / 2, height / 2.1);
        ctx.font = '15px Geologica, sans-serif';
        ctx.fillStyle = '#99A0AE';
        ctx.fillText(label, width / 2, height / 1.9);
        ctx.restore();
    },
};

export default function Example() {
    const chartRef = useRef<any>(null);
    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

    const handleClick = useCallback(async (_e: any, elements: any[]) => {
        if (elements.length > 0) {
            setSelectedIndex(elements[0].index);
        } else {
            setSelectedIndex(null);
        }
        if (chartRef.current) {
            await (chartRef.current as any).refresh();
        }
    }, []);

    const pieOptions = useMemo(
        () => ({
            responsive: true,
            cutout: '90%',
            maintainAspectRatio: true,
            onClick: handleClick,
            plugins: {
                centerText: { selectedIndex },
            },
        }),
        [handleClick, selectedIndex]
    );

    return (
        <TkChart
            type="doughnut"
            data={data}
            options={pieOptions as any}  
            plugins={[centerTextPlugin]}
            ref={chartRef}
            width="450px"
        />
    );
}

API​

Props​

NameTypeDefaultDescription
stringnullAccessibility label for the chart
ChartDatanullChart data prop is used to define chart data supported by the Chart.js library. With this prop, you can specify chart data described in the Chart.js documentation (https://www.chartjs.org/docs/latest/general/data-structures.html).
numbernullHeight of the chart container in pixels
ChartOptionsnullChart options prop is used to define chart options supported by the Chart.js library. With this prop, you can specify any chart options described in the Chart.js documentation (https://www.chartjs.org/docs/latest/general/options.html).
any[][]Custom plugins to use with chart
"bar", "bubble", "doughnut", "line", "pie", "polarArea", "radar", "scatter"'bar'The type of chart to render
stringnullWidth of the chart container

Methods​

NameDescription
getBase64ImageGet base64 image of the chart
getCanvasGet the canvas element
getChartGet the chart instance
refreshRefresh the chart