Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# LineChart

Line Chart component for time-series and trend visualization.

## Example​

    "use client";

    import { LineChart } from "@databricks/appkit-ui/react";

    export default function LineChartExample() {
      return (
        <LineChart
          data={[
            { month: "Jan", sales: 100 },
            { month: "Feb", sales: 150 },
            { month: "Mar", sales: 200 },
            { month: "Apr", sales: 180 },
            { month: "May", sales: 220 },
            { month: "Jun", sales: 250 },
          ]}
          xKey="month"
          yKey="sales"
          smooth
          height={300}
        />
      );
    }

## LineChart​

Line Chart component for time-series and trend visualization.

Important: This component uses Apache ECharts architecture. Configure it via props, not by passing child components.

Best Practice: Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.

Supports both query mode (queryKey + parameters) and data mode (static data).

Source: `packages/appkit-ui/src/react/charts/line/index.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`queryKey` | `string` |  | - | Analytics query key registered with analytics plugin
`parameters` | `Record<string, unknown>` |  | - | Query parameters passed to the analytics endpoint
`format` | `enum` |  | `"auto"` | Data format to use - "json": Use JSON format (smaller payloads, simpler) - "arrow": Use Arrow format (faster for large datasets) - "auto": Automatically select based on expected data size
`transformer` | `(<T>(data: T) => T)` |  | - | Transform raw data before rendering
`data` | `ChartData` |  | - | Arrow Table or JSON array
`title` | `string` |  | - | Chart title
`showLegend` | `boolean` |  | - | Show legend
`colorPalette` | `enum` |  | - | Color palette to use. Auto-selected based on chart type if not specified. - "categorical": Distinct colors for different categories (bar, pie, line) - "sequential": Gradient for magnitude/intensity (heatmap) - "diverging": Two-tone for positive/negative values
`colors` | `string[]` |  | - | Custom colors for series (overrides colorPalette)
`height` | `number` |  | `300` | Chart height in pixels
`className` | `string` |  | - | Additional CSS classes
`xKey` | `string` |  | - | X-axis field key. Auto-detected from schema if not provided.
`yKey` | `string | string[]` |  | - | Y-axis field key(s). Auto-detected from schema if not provided.
`ariaLabel` | `string` |  | - | Accessibility label for screen readers
`testId` | `string` |  | - | Test ID for automated testing
`options` | `Record<string, unknown>` |  | - | Additional ECharts options to merge
`orientation` | `enum` |  | `"vertical"` | Chart orientation
`showSymbol` | `boolean` |  | `false` | Show data point symbols
`smooth` | `boolean` |  | `true` | Smooth line curves

### Usage​

    import { LineChart } from '@databricks/appkit-ui';

    <LineChart /* props */ />