ChartVisualize data with graphs and plots.

Chart (line)

import Chart from '@/components/Chart';
export function Example() {  const labelsX = ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet'];  const sampleData = [    [10, 25, 18, 42, 35],    [15, 30, 22, 38, 28],    [8, 20, 35, 25, 45]  ];  const labelsData = ['Dataset A', 'Dataset B', 'Dataset C'];
  return (    <Chart      $type="line"      $legend      $labelsX={labelsX}      $labelsData={labelsData}      $data={sampleData}    />  );}

Chart (area)

import Chart from '@/components/Chart';
export function Example() {  const labelsX = ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet'];  const sampleData = [    [10, 25, 18, 42, 35],    [15, 30, 22, 38, 28]  ];  const labelsData = ['Lorem Data', 'Ipsum Data'];
  return (    <Chart      $type="area"      $legend      $labelsX={labelsX}      $labelsData={labelsData}      $data={sampleData}    />  );}

Chart (bar)

import Chart from '@/components/Chart';
export function Example() {  const labelsX = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];  const sampleData = [    [45, 52, 48, 61, 58],    [23, 28, 31, 26, 34]  ];  const labelsData = ['Revenue', 'Expenses'];
  return (    <Chart      $type="bar"      $legend      $labelsX={labelsX}      $labelsData={labelsData}      $data={sampleData}    />  );}

Chart (pie)

import Chart from '@/components/Chart';
export function Example() {  const labelsX = ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet'];  const sampleData = [[35, 25, 20, 12, 8]];  const labelsData = ['Share'];
  return (    <Chart      $type="pie"      $legend      $labelsX={labelsX}      $labelsData={labelsData}      $data={sampleData}    />  );}

Chart (without $legend)

import Chart from '@/components/Chart';
export function Example() {  const labelsX = ['Lorem', 'Ipsum', 'Dolor'];  const sampleData = [[10, 25, 18]];  const labelsData = ['Lorem'];
  return (    <Chart      $type="line"      $labelsX={labelsX}      $labelsData={labelsData}      $data={sampleData}    />  );}