SVG Line

import { KChart } from "@keneth80/k-chart-react";
import {
  createAreaSeries,
  createBarSeries,
  createBoxPlotSeries,
  createBubbleSeries,
  createCanvasCandlestickSeries,
  createCanvasLineSeries,
  createCustomSeries,
  createCursorLineOption,
  createGeoRegionMapSeries,
  createGaugeSeries,
  createGroupedColumnSeries,
  createGuideLineOption,
  createHistogramSeries,
  createLineSeries,
  createScatterSeries,
  createSpecAreaOption,
  createTooltipNoteOption,
  createTreemapSeries,
  createWaterfallSeries,
  createWebglLineSeries,
  createWorldCountryMapSeries
} from "@keneth80/k-chart";

type DemoPoint = {
  [key: string]: string | number;
  label: string;
  x: number;
  value: number;
  volume: number;
  extra: number;
  category: string;
};

const baseData: DemoPoint[] = [
  { label: "Jan", x: 1, value: 34, volume: 18, extra: 12, category: "A" },
  { label: "Feb", x: 2, value: 42, volume: 28, extra: 18, category: "B" },
  { label: "Mar", x: 3, value: 38, volume: 22, extra: 20, category: "C" },
  { label: "Apr", x: 4, value: 56, volume: 34, extra: 26, category: "D" },
  { label: "May", x: 5, value: 51, volume: 30, extra: 24, category: "E" },
  { label: "Jun", x: 6, value: 64, volume: 42, extra: 31, category: "F" }
];

const createLargeData = (length: number): DemoPoint[] => Array.from({ length }, (_, index) => {
  const point: DemoPoint = {
    label: String(index),
    x: index,
    value: 52 + Math.sin(index / 120) * 22 + Math.cos(index / 43) * 8,
    volume: 42 + Math.cos(index / 150) * 16 + Math.sin(index / 61) * 7,
    extra: 30 + Math.sin(index / 210) * 12 + Math.cos(index / 80) * 5,
    category: String(index)
  };

  for (let signalIndex = 0; signalIndex < 8; signalIndex += 1) {
    point[`signal${signalIndex}`] =
      48 + Math.sin(index / (80 + signalIndex * 18)) * (12 + signalIndex) + signalIndex * 3;
  }

  return point;
});

const largeData = createLargeData(40000);




const configuration = {
  data: baseData,
  margin: { top: 104, right: 28, bottom: 44, left: 52 },
  title: { text: "SVG Line", align: "left", fontSize: 14 },
  grid: { visible: true, x: false, y: true, color: "rgba(188, 206, 218, 0.18)", dasharray: "2 6" },
  legend: { visible: true, placement: "top", selectable: true },
  tooltip: { visible: true },
  axes: [
    { field: "x", type: "number", placement: "bottom", min: 0, max: 7, title: "Month Index" },
    { field: "value", type: "number", placement: "left", min: 0, max: 72, title: "Value" }
  ],
  series: [
    createLineSeries({ selector: "value", displayName: "Value", xField: "x", yField: "value", color: "#5db8ff", strokeWidth: 3, curve: true, dot: true }),
    createLineSeries({ selector: "volume", displayName: "Volume", xField: "x", yField: "volume", color: "#56d08f", strokeWidth: 3, curve: true, dot: true }),
    createLineSeries({ selector: "extra", displayName: "Extra", xField: "x", yField: "extra", color: "#f3b45b", strokeWidth: 3, curve: true, dot: true })
  ]
};

export default function ChartExample() {
  return <KChart {...configuration} />;
}