ChartGraph

import { useState } from 'react';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] =
    useState('visualPattern');

  const data = [
    {
      name: 'A',
      Color_01: 90,
      Color_02: 90,
      Color_03: 90,
      Color_04: 90,
      Color_05: 90,
      Color_06: 90,
    },
  ];

  return (
    <ChartGraph
      accessibilityLabel="Example of chart with decal pattern in bars"
      data={data}
      elements={[
        { type: 'bar', id: 'Color_01' },
        { type: 'bar', id: 'Color_02' },
        { type: 'bar', id: 'Color_03' },
        { type: 'bar', id: 'Color_04' },
        { type: 'bar', id: 'Color_05' },
        { type: 'bar', id: 'Color_06' },
      ]}
      onVisualPatternChange={() =>
        setVisualPatternSelected((value) =>
          value === 'default' ? 'visualPattern' : 'default'
        )
      }
      range={[0, 100]}
      title="ChartGraph"
      titleDisplay="hidden"
      type="bar"
      visualPatternSelected={visualPatternSelected}
    />
  );
}

import { useState } from 'react';
import { FixedZIndex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] =
    useState('visualPattern');

  const data = [
    {
      name: new Date(2023, 1, 1).getTime(),
      Color_01: 50,
      Color_02: 100,
      Color_03: 150,
      Color_04: 200,
      Color_05: 250,
      Color_06: 300,
    },
    {
      name: new Date(2023, 5, 15).getTime(),
      Color_01: 100,
      Color_02: 150,
      Color_03: 200,
      Color_04: 250,
      Color_05: 300,
      Color_06: 350,
    },
    {
      name: new Date(2023, 10, 1).getTime(),
      Color_01: 150,
      Color_02: 200,
      Color_03: 250,
      Color_04: 300,
      Color_05: 350,
      Color_06: 400,
    },
  ];

  return (
    <ChartGraph
      accessibilityLabel="Example of chart with decal pattern in lines"
      data={data}
      elements={[
        { type: 'line', id: 'Color_01' },
        { type: 'line', id: 'Color_02' },
        { type: 'line', id: 'Color_03' },
        { type: 'line', id: 'Color_04' },
        { type: 'line', id: 'Color_05' },
        { type: 'line', id: 'Color_06' },
      ]}
      modalZIndex={new FixedZIndex(11)}
      onVisualPatternChange={() =>
        setVisualPatternSelected((value) =>
          value === 'default' ? 'visualPattern' : 'default'
        )
      }
      range={{
        xAxisBottom: [
          new Date(2023, 0, 1).getTime(),
          new Date(2023, 11, 1).getTime(),
        ],
      }}
      tickFormatter={{
        timeseries: (date) =>
          `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
            date
          )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
            date
          )}`,
      }}
      title="ChartGraph"
      titleDisplay="hidden"
      type="line"
      visualPatternSelected={visualPatternSelected}
    />
  );
}

import { useState } from 'react';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: 'A',
      Series_01: 50,
      Series_02: 100,
    },
    {
      name: 'B',
      Series_01: 100,
      Series_02: 200,
    },
    {
      name: 'C',
      Series_01: 250,
      Series_02: 300,
    },
  ];

  return (
    <ChartGraph
      accessibilityLabel="Example of Bar chart"
      data={data}
      elements={[
        { type: 'bar', id: 'Series_01' },
        { type: 'bar', id: 'Series_02' },
      ]}
      onVisualPatternChange={() =>
        setVisualPatternSelected((value) =>
          value === 'default' ? 'visualPattern' : 'default'
        )
      }
      title="ChartGraph"
      titleDisplay="hidden"
      type="bar"
      visualPatternSelected={visualPatternSelected}
    />
  );
}

import { useState } from 'react';
import { DefaultLabelProvider } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  return (
    <DefaultLabelProvider
      labels={{
        ChartGraph: {
          accessibilityLabelPrefixText: 'ChartGraph',
          defaultViewText: 'Standard-Ansichtsmodus.',
          accessibleViewText: 'Ansichtsmodus für Barrierefreiheit.',
          tabularData: 'Tabellarische Darstellung.',
          accessibilityLabelDismissModal: 'Tabellendarstellung modal aufheben.',
          tableSeriesText: 'Reihe.',
          tableXAxisText: 'x-Achsen-Werte.',
          tableYAxisText: 'y-Achsen-Werte.',
          downloadCsvButtonText: 'Als .csv herunterladen.',
          cancelButtonText: 'Abbrechen.',
        },
      }}
    >
      <ChartGraph
        accessibilityLabel="Beispiel für ein Liniendiagramm"
        data={[
          {
            name: 'Women',
            Users: 100,
            Clickthroughs: 200,
          },
          {
            name: 'Men',
            Users: 200,
            Clickthroughs: 300,
          },
        ]}
        description="Leistung im Laufe der Zeit. Impressionen geben an, wie oft Ihr Pin auf dem Bildschirm angezeigt wurde."
        elements={[
          { type: 'bar', id: 'Users' },
          { type: 'bar', id: 'Clickthroughs' },
        ]}
        labelMap={{
          Women: 'Frauen',
          Men: 'Männer',
          Users: 'Benutzer',
          Clickthroughs: 'Durchklicken',
        }}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        title="Eindrücke"
        type="bar"
        visualPatternSelected={visualPatternSelected}
      />
    </DefaultLabelProvider>
  );
}

import { useState } from 'react';
import { Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: 'Pacific Northwest',
      Impressions: 1000,
      CPM: 1050,
      CPC: 1000,
    },
    {
      name: 'Sunbelt',
      Impressions: 1000,
      CPM: 1500,
      CPC: 1000,
    },
    {
      name: 'Great Lakes',
      Impressions: 1000,
      CPM: 1050,
      CPC: 1000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of a vertical bar chart"
        data={data}
        elements={[
          { type: 'bar', id: 'Impressions' },
          { type: 'bar', id: 'CPM' },
          { type: 'bar', id: 'CPC' },
        ]}
        layout="horizontal"
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        title="Regions in the US"
        type="bar"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { useState } from 'react';
import { Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: '10-24',
      Impressions: 1000,
      CPM: 1050,
      CPC: 1000,
    },
    {
      name: '25-50',
      Impressions: 1000,
      CPM: 1500,
      CPC: 1000,
    },
    {
      name: '50+',
      Impressions: 1000,
      CPM: 1050,
      CPC: 1000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of a vertical bar chart"
        data={data}
        elements={[
          { type: 'bar', id: 'Impressions' },
          { type: 'bar', id: 'CPM' },
          { type: 'bar', id: 'CPC' },
        ]}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        title="Age"
        type="bar"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { useState } from 'react';
import { FixedZIndex, Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: new Date(2023, 0, 1).getTime(),
      Awareness: 5000,
      Consideration: 1000,
      'Catalog sales': 4000,
      Conversions: 2500,
    },
    {
      name: new Date(2023, 1, 1).getTime(),
      Awareness: 4000,
      Consideration: 5000,
      'Catalog sales': 1000,
      Conversions: 2500,
    },
    {
      name: new Date(2023, 2, 1).getTime(),
      Awareness: 2500,
      Consideration: 5000,
      'Catalog sales': 1000,
      Conversions: 4000,
    },
    {
      name: new Date(2023, 3, 1).getTime(),
      Awareness: 2500,
      Consideration: 4000,
      'Catalog sales': 1000,
      Conversions: 5000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of stacked bars chart"
        data={data}
        elements={[
          { type: 'bar', id: 'Awareness' },
          { type: 'bar', id: 'Consideration' },
          { type: 'bar', id: 'Catalog sales' },
          { type: 'bar', id: 'Conversions' },
        ]}
        modalZIndex={new FixedZIndex(11)}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        range={{
          xAxisBottom: ['auto', 'auto'],
        }}
        stacked
        tickFormatter={{
          yAxisLeft: (value) => `${value / 1000}K`,
          timeseries: (date) =>
            `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
              date
            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
              date
            )}`,
        }}
        title="508 campaigns"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { useState } from 'react';
import { FixedZIndex, Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: new Date(2023, 0, 1).getTime(),
      Engagement: 850000,
      Saves: 870000,
      Impressions: 280000,
      'Page visits': 5000,
    },
    {
      name: new Date(2023, 1, 2).getTime(),
      Engagement: 800000,
      Saves: 690000,
      Impressions: 790000,
      'Page visits': 9000,
    },
    {
      name: new Date(2023, 2, 3).getTime(),
      Engagement: 890000,
      Saves: 850000,
      Impressions: 250000,
      'Page visits': 8000,
    },
    {
      name: new Date(2023, 3, 4).getTime(),
      Engagement: 870000,
      Saves: 550000,
      Impressions: 230000,
      'Page visits': 7000,
    },
    {
      name: new Date(2023, 4, 5).getTime(),
      Engagement: 830000,
      Saves: 84000,
      Impressions: 710000,
      'Page visits': 3000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of line chart"
        data={data}
        elements={[
          { type: 'line', id: 'Engagement' },
          { type: 'line', id: 'Saves' },
          { type: 'line', id: 'Impressions' },
          { type: 'line', id: 'Page visits' },
        ]}
        modalZIndex={new FixedZIndex(11)}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        range={{
          xAxisBottom: ['auto', 'auto'],
        }}
        tickFormatter={{
          yAxisLeft: (value) => {
            if (value >= 1000000) return `${value / 1000000}m`;
            if (value >= 1000) return `${value / 1000}k`;
            return value;
          },
          timeseries: (date) =>
            `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
              date
            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
              date
            )}`,
        }}
        title="Performance over time"
        type="line"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { useState } from 'react';
import { FixedZIndex, Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: 'Quarter 1',
      'This year': 850000,
      Profit: 870000,
      'Last year': 980000,
    },
    {
      name: 'Quarter 2',
      'This year': 800000,
      Profit: 690000,
      'Last year': 590000,
    },
    {
      name: 'Quarter 3',
      'This year': 890000,
      Profit: 850000,
      'Last year': 950000,
    },
    {
      name: 'Quarter 4',
      'This year': 870000,
      Profit: 550000,
      'Last year': 830000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of combo chart"
        data={data}
        elements={[
          { type: 'bar', id: 'This year' },
          { type: 'bar', id: 'Profit' },
          { type: 'line', id: 'Last year' },
        ]}
        modalZIndex={new FixedZIndex(11)}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        tickFormatter={{
          yAxisLeft: (value) => {
            if (value >= 1000000) return `${value / 1000000}m`;
            if (value >= 1000) return `${value / 1000}k`;
            return value;
          },
        }}
        title="Product group sales:"
        type="combo"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { useState } from 'react';
import { FixedZIndex, Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: new Date(2023, 0, 1).getTime(),
      Spend: 40000,
      'Total ROAS (Checkout)': 570000,
    },
    {
      name: new Date(2023, 1, 1).getTime(),
      Spend: 45000,
      'Total ROAS (Checkout)': 690000,
    },
    {
      name: new Date(2023, 2, 1).getTime(),
      Spend: 55000,
      'Total ROAS (Checkout)': 850000,
    },
    {
      name: new Date(2023, 3, 1).getTime(),
      Spend: 70000,
      'Total ROAS (Checkout)': 550000,
    },
    {
      name: new Date(2023, 4, 1).getTime(),
      Spend: 830000,
      'Total ROAS (Checkout)': 1000000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of line chart"
        data={data}
        elements={[
          { type: 'line', id: 'Spend', axis: 'left' },
          { type: 'line', id: 'Total ROAS (Checkout)', axis: 'right' },
        ]}
        layout="verticalBiaxial"
        modalZIndex={new FixedZIndex(11)}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        range={{ xAxisBottom: ['auto', 'auto'] }}
        tickFormatter={{
          yAxisLeft: (value) => {
            if (value >= 500) return `$${value / 500}k`;
            return value;
          },
          yAxisRight: (value) => {
            if (value >= 1000) return `${value / 1000}k`;
            return value;
          },
          timeseries: (date) =>
            `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
              date
            )} ${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
              date
            )}`,
        }}
        title="Performance over last 30 days"
        type="line"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { Flex, HelpButton } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const data = [
    {
      name: 'Quarter 1',
      Clicks: 850000,
      Conversions: 870000,
    },
    {
      name: 'Quarter 2',
      Clicks: 800000,
      Conversions: 690000,
    },
    {
      name: 'Quarter 3',
      Clicks: 890000,
      Conversions: 850000,
    },
    {
      name: 'Quarter 4',
      Clicks: 870000,
      Conversions: 550000,
    },
  ];
  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of chart with title and description"
        data={data}
        description="Includes both web and mobile"
        elements={[
          {
            type: 'bar',
            id: 'Clicks',
            axis: 'left',
          },
          {
            type: 'line',
            id: 'Conversions',
            axis: 'right',
          },
        ]}
        helpButton={
          <HelpButton
            accessibilityLabel="Click to learn more this ChartGraph"
            accessibilityPopoverLabel="Expanded information about this ChartGraph"
            link={{
              href: 'https://help.pinterest.com/en/business/article/conversion-insights/',
              text: 'Read our documentation',
              accessibilityLabel: 'Visit our Help center',
            }}
            text="If you want to learn more about Clicks vs conversions, visit our Help center."
          />
        }
        layout="verticalBiaxial"
        onVisualPatternChange={() => {}}
        title="Clicks vs conversions"
        visualPatternSelected="disabled"
      />
    </Flex>
  );
}

import { useState } from 'react';
import { FixedZIndex, Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const [visualPatternSelected, setVisualPatternSelected] = useState('default');

  const data = [
    {
      name: new Date(2023, 0, 1).getTime(),
      California: 1500000,
      Arizona: 500000,
    },
    {
      name: new Date(2023, 1, 2).getTime(),
      California: 1000000,
      Arizona: 400000,
    },
    {
      name: new Date(2023, 2, 3).getTime(),
      California: 1500000,
      Arizona: 500000,
    },
    {
      name: new Date(2023, 3, 4).getTime(),
      California: 1000000,
      Arizona: 400000,
    },
    {
      name: new Date(2023, 4, 5).getTime(),
      California: 1500000,
      Arizona: 500000,
    },
    {
      name: new Date(2023, 5, 6).getTime(),
      California: 1000000,
      Arizona: 400000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of chart with tooltip"
        data={data}
        elements={[
          { type: 'bar', id: 'California' },
          { type: 'bar', id: 'Arizona' },
        ]}
        modalZIndex={new FixedZIndex(11)}
        onVisualPatternChange={() =>
          setVisualPatternSelected((value) =>
            value === 'default' ? 'visualPattern' : 'default'
          )
        }
        tickFormatter={{
          yAxisLeft: (value) => {
            if (value >= 1000000) return `${value / 1000000}m`;
            if (value >= 1000) return `${value / 1000}k`;
            return value;
          },
          timeseries: (date) =>
            `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
              date
            )} ${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
              date
            )}`,
        }}
        title="Average spend by region"
        type="bar"
        visualPatternSelected={visualPatternSelected}
      />
    </Flex>
  );
}

import { Flex } from 'gestalt';
import { ChartGraph } from 'gestalt-charts';

export default function Example() {
  const data = [
    {
      name: new Date(2023, 0, 1).getTime(),
      Impressions: 850000,
    },
    {
      name: new Date(2023, 0, 2).getTime(),
      Impressions: 800000,
    },
    {
      name: new Date(2023, 0, 3).getTime(),
      Impressions: 890000,
    },
    {
      name: new Date(2023, 0, 4).getTime(),
      Impressions: 870000,
    },
    {
      name: new Date(2023, 0, 5).getTime(),
      Impressions: 830000,
    },
    {
      name: new Date(2023, 0, 6).getTime(),
      Impressions: 930000,
    },
    {
      name: new Date(2023, 0, 7).getTime(),
      Impressions: 630000,
    },
    {
      name: new Date(2023, 0, 8).getTime(),
      Impressions: 730000,
    },
    {
      name: new Date(2023, 0, 9).getTime(),
      Impressions: 890000,
    },
  ];

  return (
    <Flex direction="column" gap={2} height="100%" width="100%">
      <ChartGraph
        accessibilityLabel="Example of chart with reference area"
        data={data}
        elements={[{ type: 'line', id: 'Impressions' }]}
        onVisualPatternChange={() => {}}
        range={{
          yAxisLeft: [0, 1000000],
          xAxisBottom: ['auto', new Date(2023, 0, 10).getTime()],
        }}
        referenceAreas={[
          {
            id: 'ExampleBD',
            label: 'Real-time data not available',
            x1: new Date(2023, 0, 9).getTime(),
            x2: new Date(2023, 0, 10).getTime(),
            yAxisId: 'left',
            y1: 0,
            y2: 1000000,
          },
        ]}
        tickFormatter={{
          yAxisLeft: (value) => {
            if (value >= 1000000) return `${value / 1000000}m`;
            if (value >= 1000) return `${value / 1000}k`;
            return value;
          },
          timeseries: (date) =>
            `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
              date
            )}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(
              date
            )}`,
        }}
        title="Impressions over time"
        type="line"
        visualPatternSelected="disabled"
      />
    </Flex>
  );
}