### Basic Line Chart Usage Example

Source: https://github.com/automattic/charts/blob/trunk/README.md

A practical example demonstrating how to use the LineChart component from the @automattic/charts library. It includes importing the component and its styles, defining sample data, and rendering the chart with specified dimensions.

```javascript
import React from 'react';
import { LineChart } from '@automattic/charts';
import '@automattic/charts/line-chart/style.css';

const data = [
	{ date: new Date( '2024-01-01' ), value: 10 },
	{ date: new Date( '2024-01-02' ), value: 90 }, // Sharp rise
	{ date: new Date( '2024-01-03' ), value: 85 }, // Slight decline
	{ date: new Date( '2024-01-04' ), value: 82 }, // Gradual decline
	{ date: new Date( '2024-01-05' ), value: 5 }, // Sharp drop
	{ date: new Date( '2024-01-06' ), value: 8 }, // Slight rise
	{ date: new Date( '2024-01-07' ), value: 10 }, // Gradual rise
];

function MyComponent() {
	return <LineChart data={ data } width={ 400 } height={ 300 } />;
}
```

--------------------------------

### Install Automattic Charts Package

Source: https://github.com/automattic/charts/blob/trunk/README.md

Instructions for installing the @automattic/charts package using npm, pnpm, or yarn. This is the first step to integrate the charting library into your project.

```bash
npm install @automattic/charts
# or
pnpm add @automattic/charts
# or
yarn add @automattic/charts
```

--------------------------------

### Install and Import Automattic Charts

Source: https://context7.com/automattic/charts/llms.txt

Installs the Automattic Charts package using npm and demonstrates importing chart components and styles. It also shows how to import individual components for better tree-shaking.

```bash
npm install @automattic/charts
```

```javascript
import { LineChart, BarChart, PieChart } from '@automattic/charts';
import '@automattic/charts/style.css';

// Or import individually for better tree-shaking
import { LineChart } from '@automattic/charts/line-chart';
import '@automattic/charts/line-chart/style.css';
```

--------------------------------

### LineChart Component Example

Source: https://context7.com/automattic/charts/llms.txt

Demonstrates the usage of the LineChart component for displaying time-series data. It includes configurations for multiple data series, tooltips, legends, gradient fills, and animations. Requires React and the chart component.

```javascript
import React from 'react';
import { LineChart } from '@automattic/charts/line-chart';
import '@automattic/charts/line-chart/style.css';

function SalesAnalytics() {
  const data = [
    {
      label: 'Revenue',
      data: [
        { date: new Date('2024-01-01'), value: 12000 },
        { date: new Date('2024-01-02'), value: 15000 },
        { date: new Date('2024-01-03'), value: 13500 },
        { date: new Date('2024-01-04'), value: 18000 },
        { date: new Date('2024-01-05'), value: 16500 },
        { date: new Date('2024-01-06'), value: 19000 },
        { date: new Date('2024-01-07'), value: 21000 },
      ],
      options: {
        stroke: '#0073aa',
        gradient: {
          from: '#0073aa',
          to: '#005177',
          fromOpacity: 0.8,
          toOpacity: 0.1,
        },
      },
    },
    {
      label: 'Expenses',
      data: [
        { date: new Date('2024-01-01'), value: 8000 },
        { date: new Date('2024-01-02'), value: 9500 },
        { date: new Date('2024-01-03'), value: 8500 },
        { date: new Date('2024-01-04'), value: 10000 },
        { date: new Date('2024-01-05'), value: 9800 },
        { date: new Date('2024-01-06'), value: 11000 },
        { date: new Date('2024-01-07'), value: 10500 },
      ],
      options: {
        stroke: '#d63638',
      },
    },
  ];

  return (
    <LineChart
      data={data}
      width={800}
      height={400}
      withTooltips={true}
      showLegend={true}
      legendInteractive={true}
      curveType="smooth"
      withGradientFill={true}
      margin={{ top: 20, right: 30, bottom: 40, left: 60 }}
      animation={true}
    />
  );
}

```

--------------------------------

### BarChart Component Example

Source: https://context7.com/automattic/charts/llms.txt

Illustrates the BarChart component for comparing categorical data, supporting vertical and horizontal orientations, pattern fills, and interactive legends. It requires React and the BarChart component.

```javascript
import React from 'react';
import { BarChart } from '@automattic/charts/bar-chart';
import '@automattic/charts/bar-chart/style.css';

function QuarterlyResults() {
  const data = [
    {
      label: 'Products Sold',
      data: [
        { label: 'Q1 2024', value: 1250 },
        { label: 'Q2 2024', value: 1680 },
        { label: 'Q3 2024', value: 1420 },
        { label: 'Q4 2024', value: 1890 },
      ],
    },
    {
      label: 'Services Sold',
      data: [
        { label: 'Q1 2024', value: 890 },
        { label: 'Q2 2024', value: 1120 },
        { label: 'Q3 2024', value: 980 },
        { label: 'Q4 2024', value: 1340 },
      ],
    },
  ];

  return (
    <BarChart
      data={data}
      width={700}
      height={400}
      orientation="vertical"
      withPatterns={true}
      withTooltips={true}
      showLegend={true}
      legendPosition="top"
      legendAlignment="end"
      showZeroValues={true}
      gridVisibility="y"
      margin={{ top: 20, right: 20, bottom: 60, left: 80 }}
    />
  );
}

```

--------------------------------

### Import All Components and Styles

Source: https://github.com/automattic/charts/blob/trunk/README.md

Demonstrates importing all chart components and global styles from the main entry point of the @automattic/charts package. This is a convenient option but may lead to larger bundle sizes.

```javascript
import { LineChart, BarChart, PieChart } from '@automattic/charts';
import '@automattic/charts/style.css'; // Import all styles
```

--------------------------------

### Import Individual Components and Styles

Source: https://github.com/automattic/charts/blob/trunk/README.md

Shows how to import individual chart components and their corresponding styles from specific entry points within the @automattic/charts package. This approach is recommended for better bundle optimization and tree-shaking.

```javascript
// Import individual components
import { LineChart } from '@automattic/charts/line-chart';
import { BarChart } from '@automattic/charts/bar-chart';
import { PieChart } from '@automattic/charts/pie-chart';

// Import individual component styles
import '@automattic/charts/line-chart/style.css';
import '@automattic/charts/bar-chart/style.css';
import '@automattic/charts/pie-chart/style.css';
```

--------------------------------

### React ConversionFunnelChart Implementation

Source: https://context7.com/automattic/charts/llms.txt

Demonstrates how to use the ConversionFunnelChart component to visualize multi-step conversion processes. It requires React and the @automattic/charts library. The component accepts an array of steps with labels, values, and percentages, and allows for custom rendering of step labels, conversion rates, and main metrics.

```javascript
import React from 'react';
import { ConversionFunnelChart } from '@automattic/charts/conversion-funnel-chart';
import '@automattic/charts/conversion-funnel-chart/style.css';

function CheckoutFunnel() {
  const steps = [
    {
      label: 'Product View',
      value: 10000,
      percentage: 100,
      conversionRate: 100,
    },
    {
      label: 'Add to Cart',
      value: 6500,
      percentage: 65,
      conversionRate: 65,
    },
    {
      label: 'Checkout Started',
      value: 4200,
      percentage: 42,
      conversionRate: 64.6,
    },
    {
      label: 'Payment Info',
      value: 3150,
      percentage: 31.5,
      conversionRate: 75,
    },
    {
      label: 'Purchase Complete',
      value: 2835,
      percentage: 28.35,
      conversionRate: 90,
    },
  ];

  const renderStepLabel = ({ step, index }) => (
    <div>
      <strong>{step.label}</strong>
      <div style={{ fontSize: '12px', color: '#666' }}>
        Step {index + 1}
      </div>
    </div>
  );

  const renderStepRate = ({ step, index }) => {
    if (index === 0) return null;
    return (
      <span style={{ color: step.conversionRate >= 70 ? '#00a32a' : '#d63638' }}>
        {step.conversionRate.toFixed(1)}%
      </span>
    );
  };

  const renderMainMetric = ({ step }) => (
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
        {step.value.toLocaleString()}
      </div>
      <div style={{ fontSize: '12px', color: '#666' }}>
        {step.percentage}% of total
      </div>
    </div>
  );

  return (
    <ConversionFunnelChart
      steps={steps}
      width={600}
      height={500}
      renderStepLabel={renderStepLabel}
      renderStepRate={renderStepRate}
      renderMainMetric={renderMainMetric}
      withTooltips={true}
    />
  );
}

```

--------------------------------

### React GlobalChartsProvider for Theming

Source: https://context7.com/automattic/charts/llms.txt

Illustrates how to use the GlobalChartsProvider to apply a consistent theme across multiple chart components in a React application. This component requires React and imports from @automattic/charts. It accepts a theme object with customizable properties for colors, spacing, and specific chart styles. The provider wraps child components that render charts like LineChart and BarChart.

```javascript
import React from 'react';
import { GlobalChartsProvider } from '@automattic/charts/providers';
import { LineChart } from '@automattic/charts/line-chart';
import { BarChart } from '@automattic/charts/bar-chart';

function Dashboard() {
  const customTheme = {
    backgroundColor: '#ffffff',
    colors: ['#0073aa', '#00a32a', '#f0b849', '#826eb4', '#d63638'],
    gridColor: '#e0e0e0',
    gridColorDark: '#333333',
    tickLength: 8,
    legendLabelStyles: { fontSize: '14px', fontWeight: 500 },
    conversionFunnelChart: {
      primaryColor: '#0073aa',
      backgroundColor: '#f9f9f9',
      positiveChangeColor: '#00a32a',
      negativeChangeColor: '#d63638',
    },
    leaderboardChart: {
      rowGap: 16,
      columnGap: 12,
      primaryColor: '#0073aa',
      secondaryColor: '#cccccc',
      deltaColors: ['#d63638', '#666666', '#00a32a'],
    },
  };

  const lineData = [
    {
      label: 'Sales',
      data: [
        { date: new Date('2024-01-01'), value: 100 },
        { date: new Date('2024-01-02'), value: 150 },
        { date: new Date('2024-01-03'), value: 120 },
      ],
    },
  ];

  const barData = [
    {
      label: 'Revenue',
      data: [
        { label: 'Jan', value: 5000 },
        { label: 'Feb', value: 6200 },
        { label: 'Mar', value: 5800 },
      ],
    },
  ];

  return (
    <GlobalChartsProvider theme={customTheme}>
      <div style={{ display: 'grid', gap: '20px' }}>
        <LineChart
          data={lineData}
          width={800}
          height={300}
          chartId="sales-chart"
          showLegend={true}
        />
        <BarChart
          data={barData}
          width={800}
          height={300}
          chartId="revenue-chart"
          showLegend={true}
        />
      </div>
    </GlobalChartsProvider>
  );
}

```

--------------------------------

### Import visx components via @automattic/charts/visx

Source: https://github.com/automattic/charts/blob/trunk/src/visx/README.md

Demonstrates how to import visx components through the @automattic/charts/visx module instead of directly from visx packages. This approach simplifies imports and manages dependencies.

```javascript
import { LineShape } from '@automattic/charts/visx/legend';

// Instead of: import { LineShape } from '@visx/legend'

import { Text } from '@automattic/charts/visx/text';

// Instead of: import { Text } from '@visx/text'
```

--------------------------------

### Create Accessible Tooltip with Keyboard Navigation in React

Source: https://context7.com/automattic/charts/llms.txt

This snippet demonstrates how to create a custom tooltip component using React, leveraging the AccessibleTooltip and useKeyboardNavigation hooks from '@automattic/charts/tooltip'. It handles mouse events for showing/hiding tooltips and keyboard events for navigating and selecting data points, ensuring accessibility. The component requires React and the '@automattic/charts/tooltip' package.

```javascript
import React, { useState } from 'react';
import { AccessibleTooltip, useKeyboardNavigation } from '@automattic/charts/tooltip';
import '@automattic/charts/tooltip/style.css';

function CustomTooltipExample() {
  const [tooltipData, setTooltipData] = useState(null);
  const [showTooltip, setShowTooltip] = useState(false);

  const dataPoints = [
    { id: 'point-1', label: 'January', value: 100, x: 50, y: 150 },
    { id: 'point-2', label: 'February', value: 150, x: 150, y: 100 },
    { id: 'point-3', label: 'March', value: 120, x: 250, y: 130 },
  ];

  const { handleKeyDown, focusIndex } = useKeyboardNavigation({
    itemCount: dataPoints.length,
    onItemSelect: (index) => {
      setTooltipData(dataPoints[index]);
      setShowTooltip(true);
    },
  });

  return (
    <div
      onKeyDown={handleKeyDown}
      tabIndex={0}
      style={{ position: 'relative', width: 300, height: 200 }}
    >
      <svg width={300} height={200}>
        {dataPoints.map((point, index) => (
          <circle
            key={point.id}
            cx={point.x}
            cy={point.y}
            r={focusIndex === index ? 8 : 5}
            fill="#0073aa"
            onMouseEnter={() => {
              setTooltipData(point);
              setShowTooltip(true);
            }}
            onMouseLeave={() => setShowTooltip(false)}
          />
        ))}
      </svg>
      {showTooltip && tooltipData && (
        <AccessibleTooltip
          left={tooltipData.x}
          top={tooltipData.y}
          data={{
            label: tooltipData.label,
            value: tooltipData.value,
            formattedValue: `$${tooltipData.value}`,
          }}
        />
      )}
    </div>
  );
}

```

--------------------------------

### LeaderboardChart Component in JavaScript

Source: https://context7.com/automattic/charts/llms.txt

Implements a LeaderboardChart for comparing ranked data across periods. It visualizes current and previous metrics, deltas, and progress. Requires React and the @automattic/charts library.

```javascript
import React from 'react';
import { LeaderboardChart } from '@automattic/charts/leaderboard-chart';
import '@automattic/charts/leaderboard-chart/style.css';

function TopPages() {
  const data = [
    {
      id: 'home',
      label: 'Home Page',
      currentValue: 15420,
      previousValue: 12350,
      currentShare: 100,
      previousShare: 80.1,
      delta: 24.9,
    },
    {
      id: 'product',
      label: 'Product Page',
      currentValue: 12890,
      previousValue: 13200,
      currentShare: 83.6,
      previousShare: 85.7,
      delta: -2.3,
    },
    {
      id: 'blog',
      label: 'Blog',
      currentValue: 9670,
      previousValue: 8100,
      currentShare: 62.7,
      previousShare: 52.6,
      delta: 19.4,
    },
    {
      id: 'about',
      label: 'About Us',
      currentValue: 5230,
      previousValue: 4890,
      currentShare: 33.9,
      previousShare: 31.8,
      delta: 7.0,
    },
  ];

  return (
    <LeaderboardChart
      data={data}
      width={700}
      height={350}
      showLegend={true}
      legendPosition="top"
      withTooltips={true}
      metricType="number"
      margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
    />
  );
}
```

--------------------------------

### Utilize React Hooks for Charting Utilities

Source: https://context7.com/automattic/charts/llms.txt

This code showcases the use of several React hooks from '@automattic/charts/hooks' for common charting operations. It includes `useChartDataTransform` for data preparation, `useChartMargin` for calculating optimal chart margins, `useInteractiveLegendData` for managing legend interactivity, and `usePrefersReducedMotion` for respecting user accessibility preferences. The component expects `data`, `width`, and `height` as props.

```javascript
import React from 'react';
import {
  useChartDataTransform,
  useChartMargin,
  useInteractiveLegendData,
  usePrefersReducedMotion,
} from '@automattic/charts/hooks';

function CustomChartComponent({ data, width, height }) {
  // Transform raw data into chart-ready format
  const transformedData = useChartDataTransform(data);

  // Calculate optimal margins based on axis labels
  const margin = useChartMargin({
    hasYAxis: true,
    hasXAxis: true,
    yAxisWidth: 60,
    xAxisHeight: 40,
  });

  // Manage interactive legend state
  const { visibleSeries, toggleSeries, filteredData } = useInteractiveLegendData({
    data: transformedData,
    chartId: 'my-chart',
  });

  // Respect user's motion preferences
  const prefersReducedMotion = usePrefersReducedMotion();
  const shouldAnimate = !prefersReducedMotion;

  return (
    <div>
      {/* Render your chart with calculated values */}
      <svg width={width} height={height}>
        {/* Chart implementation using filteredData and margin */}
      </svg>
      {/* Legend with toggleSeries callback */}
    </div>
  );
}

```

--------------------------------

### PieChart Component in JavaScript

Source: https://context7.com/automattic/charts/llms.txt

Renders a PieChart component to display proportional data. It supports customization of size, segment appearance, labels, and interactive legends. Dependencies include React and the @automattic/charts library.

```javascript
import React from 'react';
import { PieChart } from '@automattic/charts/pie-chart';
import '@automattic/charts/pie-chart/style.css';

function TrafficSources() {
  const data = [
    {
      label: 'Organic Search',
      value: 4580,
      percentage: 45.8,
      valueDisplay: '4.6K',
      color: '#0073aa',
    },
    {
      label: 'Direct',
      value: 2850,
      percentage: 28.5,
      valueDisplay: '2.9K',
      color: '#00a32a',
    },
    {
      label: 'Social Media',
      value: 1560,
      percentage: 15.6,
      valueDisplay: '1.6K',
      color: '#f0b849',
    },
    {
      label: 'Email',
      value: 780,
      percentage: 7.8,
      valueDisplay: '780',
      color: '#826eb4',
    },
    {
      label: 'Other',
      value: 230,
      percentage: 2.3,
      valueDisplay: '230',
      color: '#cccccc',
    },
  ];

  return (
    <PieChart
      data={data}
      size={400}
      thickness={60}
      innerRadius={0.5}
      cornerScale={0.5}
      gapScale={0.02}
      showLabels={true}
      showLegend={true}
      legendValueDisplay="percentage"
      legendPosition="bottom"
      legendOrientation="vertical"
      legendInteractive={true}
      withTooltips={true}
      animation={true}
    />
  );
}
```

--------------------------------

### BarListChart Component in JavaScript

Source: https://context7.com/automattic/charts/llms.txt

Displays a BarListChart, a compact horizontal bar chart for ranked data. It allows custom rendering for labels and values, with options for tooltips and legend visibility. Requires React and the @automattic/charts library.

```javascript
import React from 'react';
import { BarListChart } from '@automattic/charts/bar-list-chart';
import '@automattic/charts/bar-list-chart/style.css';

function TopProducts() {
  const data = [
    { label: 'Premium Plan', value: 3250 },
    { label: 'Business Plan', value: 2180 },
    { label: 'Enterprise Plan', value: 1890 },
    { label: 'Starter Plan', value: 1560 },
    { label: 'Add-ons', value: 890 },
  ];

  const renderLabel = ({ label, color }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span
        style={{
          width: '12px',
          height: '12px',
          backgroundColor: color,
          borderRadius: '2px',
        }}
      />
      <span>{label}</span>
    </div>
  );

  const renderValue = ({ value, formattedValue }) => (
    <strong style={{ fontSize: '14px' }}>{formattedValue}</strong>
  );

  return (
    <BarListChart
      data={data}
      width={500}
      height={300}
      renderLabel={renderLabel}
      renderValue={renderValue}
      showLegend={false}
      withTooltips={true}
    />
  );
}
```

--------------------------------

### React Legend Component Usage

Source: https://context7.com/automattic/charts/llms.txt

Shows how to implement a standalone Legend component from @automattic/charts/legend in a React application. It utilizes the useChartLegendItems hook to process chart data and generate legend items, supporting features like value display and totals. The Legend component can be configured with various props for orientation, shape, interactivity, and custom styling.

```javascript
import React from 'react';
import { Legend, useChartLegendItems } from '@automattic/charts/legend';
import '@automattic/charts/legend/style.css';

function CustomChartWithLegend() {
  const data = [
    {
      label: 'Category A',
      data: [{ date: new Date('2024-01-01'), value: 100 }],
    },
    {
      label: 'Category B',
      data: [{ date: new Date('2024-01-01'), value: 200 }],
    },
  ];

  const legendItems = useChartLegendItems({
    data,
    valueDisplay: 'value',
    showTotal: true,
  });

  return (
    <div>
      <Legend
        items={legendItems}
        orientation="horizontal"
        shape="circle"
        interactive={false}
        className="custom-legend"
      />
      {/* Your custom chart implementation */}
    </div>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.