@nivo/core

  • Version 0.87.0
  • Published
  • 327 kB
  • 12 dependencies
  • MIT license

Install

npm i @nivo/core
yarn add @nivo/core
pnpm add @nivo/core

Overview

<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable boxAlignments

const boxAlignments: readonly BoxAlign[];

    variable CartesianMarkers

    const CartesianMarkers: CartesianMarkersType;

      variable closedCurvePropKeys

      const closedCurvePropKeys: readonly ClosedCurveFactoryId[];

        variable Container

        const Container: ContainerType;

          variable defaultAnimate

          const defaultAnimate: boolean;

            variable defaultMargin

            const defaultMargin: DefaultMargin;

              variable DotsItem

              const DotsItem: React.FunctionComponent<DotsItemProps<any>>;

                variable motionDefaultProps

                const motionDefaultProps: MotionDefaultProps;

                  variable ResponsiveWrapper

                  const ResponsiveWrapper: ResponsiveWrapperType;

                    variable SvgWrapper

                    const SvgWrapper: SvgWrapperType;

                      variable ThemeProvider

                      const ThemeProvider: ThemeProviderType;

                        Functions

                        function absoluteAngleDegrees

                        absoluteAngleDegrees: (degrees: number) => number;

                          function alignBox

                          alignBox: (
                          box: AlignBox,
                          container: AlignBox,
                          alignment: BoxAlign
                          ) => [number, number];

                            function clampArc

                            clampArc: (
                            startAngle: number,
                            endAngle: number,
                            length?: number
                            ) => [number, number];

                              function curveFromProp

                              curveFromProp: (interpolation: CurveFactoryId) => CurveFactory;

                                function Defs

                                Defs: (props: DefsProps) => JSX.Element;

                                  function degreesToRadians

                                  degreesToRadians: (degrees: number) => number;

                                    function extendDefaultTheme

                                    extendDefaultTheme: (
                                    defaultTheme: ThemeWithoutInheritance,
                                    customTheme: Theme
                                    ) => CompleteTheme;

                                      function getAngle

                                      getAngle: (x1: number, y1: number, x2: number, y2: number) => number;

                                        function getDistance

                                        getDistance: (x1: number, y1: number, x2: number, y2: number) => number;

                                          function getPropertyAccessor

                                          getPropertyAccessor: <Datum, Value>(
                                          accessor: PropertyAccessor<Datum, Value>
                                          ) => (datum: Datum) => Value;

                                            function getRelativeCursor

                                            getRelativeCursor: (
                                            element: Element,
                                            event: React.MouseEvent | React.TouchEvent
                                            ) => [number, number];

                                              function getValueFormatter

                                              getValueFormatter: <Value, Context = void>(
                                              format?: ValueFormat<Value, Context>
                                              ) => Context extends void
                                              ? (value: Value) => string
                                              : (value: Value, context: Context) => string;

                                                function isCursorInRect

                                                isCursorInRect: (
                                                x: number,
                                                y: number,
                                                width: number,
                                                height: number,
                                                cursorX: number,
                                                cursorY: number
                                                ) => boolean;

                                                  function linearGradientDef

                                                  linearGradientDef: (
                                                  id: string,
                                                  colors: GradientColor[],
                                                  options?: React.SVGProps<SVGLinearGradientElement>
                                                  ) => {
                                                  id: string;
                                                  type: 'linearGradient';
                                                  colors: GradientColor[];
                                                  } & React.SVGProps<SVGLinearGradientElement>;

                                                    function normalizeAngle

                                                    normalizeAngle: (degrees: number) => number;

                                                      function PatternDots

                                                      PatternDots: (props: Omit<PatternDotsDef, 'type'>) => JSX.Element;

                                                        function patternDotsDef

                                                        patternDotsDef: (
                                                        id: string,
                                                        options?: Omit<PatternDotsDef, 'id' | 'type'>
                                                        ) => PatternDotsDef;

                                                          function PatternLines

                                                          PatternLines: (props: Omit<PatternLinesDef, 'type'>) => JSX.Element;

                                                            function patternLinesDef

                                                            patternLinesDef: (
                                                            id: string,
                                                            options?: Omit<PatternLinesDef, 'id' | 'type'>
                                                            ) => PatternLinesDef;

                                                              function PatternSquares

                                                              PatternSquares: (props: Omit<PatternSquaresDef, 'type'>) => JSX.Element;

                                                                function patternSquaresDef

                                                                patternSquaresDef: (
                                                                id: string,
                                                                options?: Omit<PatternSquaresDef, 'id' | 'type'>
                                                                ) => PatternSquaresDef;

                                                                  function positionFromAngle

                                                                  positionFromAngle: (angle: number, distance: number) => { x: number; y: number };

                                                                    function radiansToDegrees

                                                                    radiansToDegrees: (radians: number) => number;

                                                                      function sanitizeSvgTextStyle

                                                                      sanitizeSvgTextStyle: (style: TextStyle) => any;

                                                                        function useAnimatedPath

                                                                        useAnimatedPath: (path: string) => Interpolation<string>;

                                                                          function useCurveInterpolation

                                                                          useCurveInterpolation: (interpolation: CurveFactoryId) => CurveFactory;

                                                                            function useDimensions

                                                                            useDimensions: (
                                                                            width: number,
                                                                            height: number,
                                                                            margin?: Box
                                                                            ) => {
                                                                            margin: Margin;
                                                                            innerWidth: number;
                                                                            innerHeight: number;
                                                                            outerWidth: number;
                                                                            outerHeight: number;
                                                                            };

                                                                              function useMeasure

                                                                              useMeasure: () => [
                                                                              React.RefObject<HTMLDivElement>,
                                                                              { left: number; top: number; width: number; height: number }
                                                                              ];

                                                                                function useMotionConfig

                                                                                useMotionConfig: () => { animate: boolean; config: SpringConfig };

                                                                                  function usePartialTheme

                                                                                  usePartialTheme: (theme?: Theme) => CompleteTheme;

                                                                                    function usePropertyAccessor

                                                                                    usePropertyAccessor: <Datum, Value>(
                                                                                    accessor: PropertyAccessor<Datum, Value>
                                                                                    ) => (datum: Datum) => Value;

                                                                                      function useTheme

                                                                                      useTheme: () => CompleteTheme;

                                                                                        function useValueFormatter

                                                                                        useValueFormatter: <Value, Context = void>(
                                                                                        format?: ValueFormat<Value, Context>
                                                                                        ) => Context extends void
                                                                                        ? (value: Value) => string
                                                                                        : (value: Value, context: Context) => string;

                                                                                          Interfaces

                                                                                          interface AlignBox

                                                                                          interface AlignBox extends Dimensions, Point {}

                                                                                            interface CartesianMarkerProps

                                                                                            interface CartesianMarkerProps<V extends DatumValue = DatumValue> {}

                                                                                              property axis

                                                                                              axis: 'x' | 'y';

                                                                                                property legend

                                                                                                legend?: string;

                                                                                                  property legendOrientation

                                                                                                  legendOrientation?: 'horizontal' | 'vertical';

                                                                                                    property legendPosition

                                                                                                    legendPosition?: BoxAlign;

                                                                                                      property lineStyle

                                                                                                      lineStyle?: Partial<React.CSSProperties>;

                                                                                                        property textStyle

                                                                                                        textStyle?: Partial<React.CSSProperties>;

                                                                                                          property value

                                                                                                          value: V;

                                                                                                            interface CartesianMarkersProps

                                                                                                            interface CartesianMarkersProps<
                                                                                                            X extends DatumValue = DatumValue,
                                                                                                            Y extends DatumValue = DatumValue
                                                                                                            > {}

                                                                                                              property height

                                                                                                              height: number;

                                                                                                                property markers

                                                                                                                markers: readonly CartesianMarkerProps<X | Y>[];

                                                                                                                  property width

                                                                                                                  width: number;

                                                                                                                    property xScale

                                                                                                                    xScale: (value: X) => number;

                                                                                                                      property yScale

                                                                                                                      yScale: (value: Y) => number;

                                                                                                                        interface ColorProps

                                                                                                                        interface ColorProps<T> {}

                                                                                                                          property colorBy

                                                                                                                          colorBy?: string | GetColor<T>;

                                                                                                                            property colors

                                                                                                                            colors?: Colors;

                                                                                                                              interface ContainerProps

                                                                                                                              interface ContainerProps {}

                                                                                                                                property animate

                                                                                                                                animate?: boolean;

                                                                                                                                  property isInteractive

                                                                                                                                  isInteractive?: boolean;

                                                                                                                                    property motionConfig

                                                                                                                                    motionConfig?: string | SpringConfig;

                                                                                                                                      property renderWrapper

                                                                                                                                      renderWrapper?: boolean;

                                                                                                                                        property theme

                                                                                                                                        theme?: Theme;

                                                                                                                                          interface Dimensions

                                                                                                                                          interface Dimensions {}

                                                                                                                                            property height

                                                                                                                                            height: number;

                                                                                                                                              property width

                                                                                                                                              width: number;

                                                                                                                                                interface DotsItemProps

                                                                                                                                                interface DotsItemProps<D = any> {}

                                                                                                                                                  property borderColor

                                                                                                                                                  borderColor: string;

                                                                                                                                                    property borderWidth

                                                                                                                                                    borderWidth: number;

                                                                                                                                                      property color

                                                                                                                                                      color: string;

                                                                                                                                                        property datum

                                                                                                                                                        datum: D;

                                                                                                                                                          property label

                                                                                                                                                          label?: string | number;

                                                                                                                                                            property labelTextAnchor

                                                                                                                                                            labelTextAnchor?: 'start' | 'middle' | 'end';

                                                                                                                                                              property labelYOffset

                                                                                                                                                              labelYOffset?: number;

                                                                                                                                                                property size

                                                                                                                                                                size: number;

                                                                                                                                                                  property symbol

                                                                                                                                                                  symbol?: DotsItemSymbolComponent;

                                                                                                                                                                    property x

                                                                                                                                                                    x: number;

                                                                                                                                                                      property y

                                                                                                                                                                      y: number;

                                                                                                                                                                        interface DotsItemSymbolProps

                                                                                                                                                                        interface DotsItemSymbolProps {}

                                                                                                                                                                          property borderColor

                                                                                                                                                                          borderColor: string;

                                                                                                                                                                            property borderWidth

                                                                                                                                                                            borderWidth: number;

                                                                                                                                                                              property color

                                                                                                                                                                              color: string;

                                                                                                                                                                                property size

                                                                                                                                                                                size: number;

                                                                                                                                                                                  interface Point

                                                                                                                                                                                  interface Point {}

                                                                                                                                                                                    property x

                                                                                                                                                                                    x: number;

                                                                                                                                                                                      property y

                                                                                                                                                                                      y: number;

                                                                                                                                                                                        interface SvgDefsAndFill

                                                                                                                                                                                        interface SvgDefsAndFill<T> {}

                                                                                                                                                                                          property defs

                                                                                                                                                                                          defs?: readonly {
                                                                                                                                                                                          id: string;
                                                                                                                                                                                          [key: string]: any;
                                                                                                                                                                                          }[];

                                                                                                                                                                                            property fill

                                                                                                                                                                                            fill?: readonly {
                                                                                                                                                                                            id: string;
                                                                                                                                                                                            match: Record<string, unknown> | SvgFillMatcher<T> | '*';
                                                                                                                                                                                            }[];

                                                                                                                                                                                              interface ThemeProviderProps

                                                                                                                                                                                              interface ThemeProviderProps {}

                                                                                                                                                                                                property theme

                                                                                                                                                                                                theme?: Theme;

                                                                                                                                                                                                  Type Aliases

                                                                                                                                                                                                  type Accessor

                                                                                                                                                                                                  type Accessor<T extends keyof U, U> = T extends string ? U[T] : never;

                                                                                                                                                                                                    type AreaCurve

                                                                                                                                                                                                    type AreaCurve =
                                                                                                                                                                                                    | 'basis'
                                                                                                                                                                                                    | 'cardinal'
                                                                                                                                                                                                    | 'catmullRom'
                                                                                                                                                                                                    | 'linear'
                                                                                                                                                                                                    | 'monotoneX'
                                                                                                                                                                                                    | 'monotoneY'
                                                                                                                                                                                                    | 'natural'
                                                                                                                                                                                                    | 'step'
                                                                                                                                                                                                    | 'stepAfter'
                                                                                                                                                                                                    | 'stepBefore';

                                                                                                                                                                                                      type AreaCurveFactoryId

                                                                                                                                                                                                      type AreaCurveFactoryId =
                                                                                                                                                                                                      | 'basis'
                                                                                                                                                                                                      | 'cardinal'
                                                                                                                                                                                                      | 'catmullRom'
                                                                                                                                                                                                      | 'linear'
                                                                                                                                                                                                      | 'monotoneX'
                                                                                                                                                                                                      | 'monotoneY'
                                                                                                                                                                                                      | 'natural'
                                                                                                                                                                                                      | 'step'
                                                                                                                                                                                                      | 'stepAfter'
                                                                                                                                                                                                      | 'stepBefore';

                                                                                                                                                                                                        type Box

                                                                                                                                                                                                        type Box = Partial<Margin>;

                                                                                                                                                                                                          type BoxAlign

                                                                                                                                                                                                          type BoxAlign =
                                                                                                                                                                                                          | 'center'
                                                                                                                                                                                                          | 'top-left'
                                                                                                                                                                                                          | 'top'
                                                                                                                                                                                                          | 'top-right'
                                                                                                                                                                                                          | 'right'
                                                                                                                                                                                                          | 'bottom-right'
                                                                                                                                                                                                          | 'bottom'
                                                                                                                                                                                                          | 'bottom-left'
                                                                                                                                                                                                          | 'left';

                                                                                                                                                                                                            type CartesianMarkersType

                                                                                                                                                                                                            type CartesianMarkersType = <
                                                                                                                                                                                                            X extends DatumValue = DatumValue,
                                                                                                                                                                                                            Y extends DatumValue = DatumValue
                                                                                                                                                                                                            >(
                                                                                                                                                                                                            props: CartesianMarkersProps<X, Y>
                                                                                                                                                                                                            ) => JSX.Element;

                                                                                                                                                                                                              type ClosedCurveFactoryId

                                                                                                                                                                                                              type ClosedCurveFactoryId =
                                                                                                                                                                                                              | 'basisClosed'
                                                                                                                                                                                                              | 'cardinalClosed'
                                                                                                                                                                                                              | 'catmullRomClosed'
                                                                                                                                                                                                              | 'linearClosed';

                                                                                                                                                                                                                type Colors

                                                                                                                                                                                                                type Colors = readonly string[] | string;

                                                                                                                                                                                                                  type CompleteTheme

                                                                                                                                                                                                                  type CompleteTheme = {
                                                                                                                                                                                                                  background: string;
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  axis: {
                                                                                                                                                                                                                  domain: {
                                                                                                                                                                                                                  line: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  ticks: {
                                                                                                                                                                                                                  line: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  legend: {
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  grid: {
                                                                                                                                                                                                                  line: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  crosshair: {
                                                                                                                                                                                                                  line: {
                                                                                                                                                                                                                  stroke: string;
                                                                                                                                                                                                                  strokeWidth: number;
                                                                                                                                                                                                                  strokeOpacity: number;
                                                                                                                                                                                                                  strokeDasharray: string;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  legends: {
                                                                                                                                                                                                                  hidden: {
                                                                                                                                                                                                                  symbol: Partial<{
                                                                                                                                                                                                                  fill: string;
                                                                                                                                                                                                                  opacity: number;
                                                                                                                                                                                                                  }>;
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  title: {
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  ticks: {
                                                                                                                                                                                                                  line: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  labels: {
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  markers: {
                                                                                                                                                                                                                  lineColor: string;
                                                                                                                                                                                                                  lineStrokeWidth: number;
                                                                                                                                                                                                                  textColor: string;
                                                                                                                                                                                                                  fontSize: string | 0;
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  dots: {
                                                                                                                                                                                                                  text: TextStyle;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  tooltip: {
                                                                                                                                                                                                                  wrapper: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  container: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  basic: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  chip: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  table: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  tableCell: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  tableCellValue: Partial<React.CSSProperties>;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  annotations: {
                                                                                                                                                                                                                  text: {
                                                                                                                                                                                                                  fill: string;
                                                                                                                                                                                                                  outlineWidth: number;
                                                                                                                                                                                                                  outlineColor: string;
                                                                                                                                                                                                                  outlineOpacity: number;
                                                                                                                                                                                                                  } & Partial<Omit<React.CSSProperties, 'fill'>>;
                                                                                                                                                                                                                  link: {
                                                                                                                                                                                                                  stroke: string;
                                                                                                                                                                                                                  strokeWidth: number;
                                                                                                                                                                                                                  outlineWidth: number;
                                                                                                                                                                                                                  outlineColor: string;
                                                                                                                                                                                                                  outlineOpacity: number;
                                                                                                                                                                                                                  } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>;
                                                                                                                                                                                                                  outline: {
                                                                                                                                                                                                                  stroke: string;
                                                                                                                                                                                                                  strokeWidth: number;
                                                                                                                                                                                                                  outlineWidth: number;
                                                                                                                                                                                                                  outlineColor: string;
                                                                                                                                                                                                                  outlineOpacity: number;
                                                                                                                                                                                                                  } & Partial<Omit<React.CSSProperties, 'stroke' | 'strokeWidth'>>;
                                                                                                                                                                                                                  symbol: {
                                                                                                                                                                                                                  fill: string;
                                                                                                                                                                                                                  outlineWidth: number;
                                                                                                                                                                                                                  outlineColor: string;
                                                                                                                                                                                                                  outlineOpacity: number;
                                                                                                                                                                                                                  } & Partial<Omit<React.CSSProperties, 'fill'>>;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  };

                                                                                                                                                                                                                    type ContainerType

                                                                                                                                                                                                                    type ContainerType = (props: React.PropsWithChildren<ContainerProps>) => JSX.Element;

                                                                                                                                                                                                                      type CssMixBlendMode

                                                                                                                                                                                                                      type CssMixBlendMode =
                                                                                                                                                                                                                      | 'normal'
                                                                                                                                                                                                                      | 'multiply'
                                                                                                                                                                                                                      | 'screen'
                                                                                                                                                                                                                      | 'overlay'
                                                                                                                                                                                                                      | 'darken'
                                                                                                                                                                                                                      | 'lighten'
                                                                                                                                                                                                                      | 'color-dodge'
                                                                                                                                                                                                                      | 'color-burn'
                                                                                                                                                                                                                      | 'hard-light'
                                                                                                                                                                                                                      | 'soft-light'
                                                                                                                                                                                                                      | 'difference'
                                                                                                                                                                                                                      | 'exclusion'
                                                                                                                                                                                                                      | 'hue'
                                                                                                                                                                                                                      | 'saturation'
                                                                                                                                                                                                                      | 'color'
                                                                                                                                                                                                                      | 'luminosity';

                                                                                                                                                                                                                        type CurveFactoryId

                                                                                                                                                                                                                        type CurveFactoryId =
                                                                                                                                                                                                                        | 'basis'
                                                                                                                                                                                                                        | 'basisClosed'
                                                                                                                                                                                                                        | 'basisOpen'
                                                                                                                                                                                                                        | 'bundle'
                                                                                                                                                                                                                        | 'cardinal'
                                                                                                                                                                                                                        | 'cardinalClosed'
                                                                                                                                                                                                                        | 'cardinalOpen'
                                                                                                                                                                                                                        | 'catmullRom'
                                                                                                                                                                                                                        | 'catmullRomClosed'
                                                                                                                                                                                                                        | 'catmullRomOpen'
                                                                                                                                                                                                                        | 'linear'
                                                                                                                                                                                                                        | 'linearClosed'
                                                                                                                                                                                                                        | 'monotoneX'
                                                                                                                                                                                                                        | 'monotoneY'
                                                                                                                                                                                                                        | 'natural'
                                                                                                                                                                                                                        | 'step'
                                                                                                                                                                                                                        | 'stepAfter'
                                                                                                                                                                                                                        | 'stepBefore';

                                                                                                                                                                                                                          type DatumPropertyAccessor

                                                                                                                                                                                                                          type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T;

                                                                                                                                                                                                                            type DatumValue

                                                                                                                                                                                                                            type DatumValue = string | number | Date;

                                                                                                                                                                                                                              type Def

                                                                                                                                                                                                                              type Def = LinearGradientDef | PatternDotsDef | PatternSquaresDef | PatternLinesDef;

                                                                                                                                                                                                                                type DefaultMargin

                                                                                                                                                                                                                                type DefaultMargin = {
                                                                                                                                                                                                                                top: 0;
                                                                                                                                                                                                                                right: 0;
                                                                                                                                                                                                                                bottom: 0;
                                                                                                                                                                                                                                left: 0;
                                                                                                                                                                                                                                };

                                                                                                                                                                                                                                  type DefsProps

                                                                                                                                                                                                                                  type DefsProps = {
                                                                                                                                                                                                                                  defs: readonly Def[];
                                                                                                                                                                                                                                  };

                                                                                                                                                                                                                                    type DotsItemSymbolComponent

                                                                                                                                                                                                                                    type DotsItemSymbolComponent = React.FunctionComponent<DotsItemSymbolProps>;

                                                                                                                                                                                                                                      type ExtractProps

                                                                                                                                                                                                                                      type ExtractProps<TComponent> = TComponent extends ComponentType<infer TProps>
                                                                                                                                                                                                                                      ? TProps
                                                                                                                                                                                                                                      : never;

                                                                                                                                                                                                                                        type GetColor

                                                                                                                                                                                                                                        type GetColor<T> = (datum: T) => string;

                                                                                                                                                                                                                                          type GradientColor

                                                                                                                                                                                                                                          type GradientColor = {
                                                                                                                                                                                                                                          offset: number;
                                                                                                                                                                                                                                          color: string;
                                                                                                                                                                                                                                          opacity?: number;
                                                                                                                                                                                                                                          };

                                                                                                                                                                                                                                            type LinearGradientDef

                                                                                                                                                                                                                                            type LinearGradientDef = {
                                                                                                                                                                                                                                            id: string;
                                                                                                                                                                                                                                            type: 'linearGradient';
                                                                                                                                                                                                                                            colors: {
                                                                                                                                                                                                                                            offset: number;
                                                                                                                                                                                                                                            color: string;
                                                                                                                                                                                                                                            opacity?: number;
                                                                                                                                                                                                                                            }[];
                                                                                                                                                                                                                                            gradientTransform?: string;
                                                                                                                                                                                                                                            };

                                                                                                                                                                                                                                              type LineCurveFactoryId

                                                                                                                                                                                                                                              type LineCurveFactoryId =
                                                                                                                                                                                                                                              | 'basis'
                                                                                                                                                                                                                                              | 'cardinal'
                                                                                                                                                                                                                                              | 'catmullRom'
                                                                                                                                                                                                                                              | 'linear'
                                                                                                                                                                                                                                              | 'monotoneX'
                                                                                                                                                                                                                                              | 'monotoneY'
                                                                                                                                                                                                                                              | 'natural'
                                                                                                                                                                                                                                              | 'step'
                                                                                                                                                                                                                                              | 'stepAfter'
                                                                                                                                                                                                                                              | 'stepBefore';

                                                                                                                                                                                                                                                type Margin

                                                                                                                                                                                                                                                type Margin = {
                                                                                                                                                                                                                                                bottom: number;
                                                                                                                                                                                                                                                left: number;
                                                                                                                                                                                                                                                right: number;
                                                                                                                                                                                                                                                top: number;
                                                                                                                                                                                                                                                };

                                                                                                                                                                                                                                                  type MotionDefaultProps

                                                                                                                                                                                                                                                  type MotionDefaultProps = {
                                                                                                                                                                                                                                                  animate: true;
                                                                                                                                                                                                                                                  config: 'default';
                                                                                                                                                                                                                                                  };

                                                                                                                                                                                                                                                    type MotionProps

                                                                                                                                                                                                                                                    type MotionProps = Partial<{
                                                                                                                                                                                                                                                    animate: boolean;
                                                                                                                                                                                                                                                    motionConfig: string | SpringConfig;
                                                                                                                                                                                                                                                    }>;

                                                                                                                                                                                                                                                      type Padding

                                                                                                                                                                                                                                                      type Padding = Margin;

                                                                                                                                                                                                                                                        type PatternDotsDef

                                                                                                                                                                                                                                                        type PatternDotsDef = {
                                                                                                                                                                                                                                                        id: string;
                                                                                                                                                                                                                                                        type: 'patternDots';
                                                                                                                                                                                                                                                        color?: string;
                                                                                                                                                                                                                                                        background?: string;
                                                                                                                                                                                                                                                        size?: number;
                                                                                                                                                                                                                                                        padding?: number;
                                                                                                                                                                                                                                                        stagger?: boolean;
                                                                                                                                                                                                                                                        };

                                                                                                                                                                                                                                                          type PatternLinesDef

                                                                                                                                                                                                                                                          type PatternLinesDef = {
                                                                                                                                                                                                                                                          id: string;
                                                                                                                                                                                                                                                          type: 'patternLines';
                                                                                                                                                                                                                                                          spacing?: number;
                                                                                                                                                                                                                                                          rotation?: number;
                                                                                                                                                                                                                                                          background?: string;
                                                                                                                                                                                                                                                          color?: string;
                                                                                                                                                                                                                                                          lineWidth?: number;
                                                                                                                                                                                                                                                          };

                                                                                                                                                                                                                                                            type PatternSquaresDef

                                                                                                                                                                                                                                                            type PatternSquaresDef = Omit<PatternDotsDef, 'type'> & {
                                                                                                                                                                                                                                                            type: 'patternSquares';
                                                                                                                                                                                                                                                            };

                                                                                                                                                                                                                                                              type PropertyAccessor

                                                                                                                                                                                                                                                              type PropertyAccessor<Datum, Value> =
                                                                                                                                                                                                                                                              // path to use with `lodash.get()`
                                                                                                                                                                                                                                                              | string
                                                                                                                                                                                                                                                              // explicit accessor function
                                                                                                                                                                                                                                                              | ((datum: Datum) => Value);

                                                                                                                                                                                                                                                                type ResponsiveWrapperType

                                                                                                                                                                                                                                                                type ResponsiveWrapperType = (props: {
                                                                                                                                                                                                                                                                children: (dimensions: { width: number; height: number }) => JSX.Element;
                                                                                                                                                                                                                                                                }) => JSX.Element;

                                                                                                                                                                                                                                                                  type StackOffset

                                                                                                                                                                                                                                                                  type StackOffset = 'expand' | 'diverging' | 'none' | 'silhouette' | 'wiggle';

                                                                                                                                                                                                                                                                    type StackOrder

                                                                                                                                                                                                                                                                    type StackOrder = 'ascending' | 'descending' | 'insideOut' | 'none' | 'reverse';

                                                                                                                                                                                                                                                                      type SvgFillMatcher

                                                                                                                                                                                                                                                                      type SvgFillMatcher<T> = (datum: T) => boolean;

                                                                                                                                                                                                                                                                        type SvgWrapperType

                                                                                                                                                                                                                                                                        type SvgWrapperType = (
                                                                                                                                                                                                                                                                        props: React.PropsWithChildren<{
                                                                                                                                                                                                                                                                        width: number;
                                                                                                                                                                                                                                                                        height: number;
                                                                                                                                                                                                                                                                        margin: Margin;
                                                                                                                                                                                                                                                                        defs?: any;
                                                                                                                                                                                                                                                                        role?: string;
                                                                                                                                                                                                                                                                        ariaLabel?: React.AriaAttributes['aria-label'];
                                                                                                                                                                                                                                                                        ariaLabelledBy?: React.AriaAttributes['aria-labelledby'];
                                                                                                                                                                                                                                                                        ariaDescribedBy?: React.AriaAttributes['aria-describedby'];
                                                                                                                                                                                                                                                                        isFocusable?: boolean;
                                                                                                                                                                                                                                                                        }>
                                                                                                                                                                                                                                                                        ) => JSX.Element;

                                                                                                                                                                                                                                                                          type TextStyle

                                                                                                                                                                                                                                                                          type TextStyle = {
                                                                                                                                                                                                                                                                          fontFamily: Exclude<React.CSSProperties['fontFamily'], undefined>;
                                                                                                                                                                                                                                                                          fontSize: Exclude<React.CSSProperties['fontSize'], undefined>;
                                                                                                                                                                                                                                                                          fill: string;
                                                                                                                                                                                                                                                                          outlineWidth: number;
                                                                                                                                                                                                                                                                          outlineColor: string;
                                                                                                                                                                                                                                                                          outlineOpacity: number;
                                                                                                                                                                                                                                                                          } & Partial<React.CSSProperties>;
                                                                                                                                                                                                                                                                          • Required text properties + optional ones.

                                                                                                                                                                                                                                                                          type Theme

                                                                                                                                                                                                                                                                          type Theme = Partial<{
                                                                                                                                                                                                                                                                          background: CompleteTheme['background'];
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['text']>;
                                                                                                                                                                                                                                                                          axis: Partial<{
                                                                                                                                                                                                                                                                          domain: Partial<{
                                                                                                                                                                                                                                                                          line: Partial<CompleteTheme['axis']['domain']['line']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          ticks: Partial<{
                                                                                                                                                                                                                                                                          line: Partial<CompleteTheme['axis']['ticks']['line']>;
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['axis']['ticks']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          legend: Partial<{
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['axis']['legend']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          grid: Partial<{
                                                                                                                                                                                                                                                                          line: Partial<CompleteTheme['grid']['line']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          crosshair: Partial<{
                                                                                                                                                                                                                                                                          line: Partial<CompleteTheme['crosshair']['line']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          legends: Partial<{
                                                                                                                                                                                                                                                                          hidden: Partial<{
                                                                                                                                                                                                                                                                          symbol: CompleteTheme['legends']['hidden']['symbol'];
                                                                                                                                                                                                                                                                          text: CompleteTheme['legends']['hidden']['text'];
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          title: Partial<{
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['legends']['title']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['legends']['text']>;
                                                                                                                                                                                                                                                                          ticks: Partial<{
                                                                                                                                                                                                                                                                          line: Partial<CompleteTheme['legends']['ticks']['line']>;
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['legends']['ticks']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          labels: Partial<{
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['labels']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          markers: Partial<CompleteTheme['markers']>;
                                                                                                                                                                                                                                                                          dots: Partial<{
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['dots']['text']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          tooltip: Partial<CompleteTheme['tooltip']>;
                                                                                                                                                                                                                                                                          annotations: Partial<{
                                                                                                                                                                                                                                                                          text: Partial<CompleteTheme['annotations']['text']>;
                                                                                                                                                                                                                                                                          link: Partial<CompleteTheme['annotations']['link']>;
                                                                                                                                                                                                                                                                          outline: Partial<CompleteTheme['annotations']['outline']>;
                                                                                                                                                                                                                                                                          symbol: Partial<CompleteTheme['annotations']['symbol']>;
                                                                                                                                                                                                                                                                          }>;
                                                                                                                                                                                                                                                                          }>;

                                                                                                                                                                                                                                                                            type ThemeProviderType

                                                                                                                                                                                                                                                                            type ThemeProviderType = (
                                                                                                                                                                                                                                                                            props: React.PropsWithChildren<ThemeProviderProps>
                                                                                                                                                                                                                                                                            ) => JSX.Element;

                                                                                                                                                                                                                                                                              type ThemeWithoutInheritance

                                                                                                                                                                                                                                                                              type ThemeWithoutInheritance = {
                                                                                                                                                                                                                                                                              background: CompleteTheme['background'];
                                                                                                                                                                                                                                                                              text: CompleteTheme['text'];
                                                                                                                                                                                                                                                                              axis: {
                                                                                                                                                                                                                                                                              domain: {
                                                                                                                                                                                                                                                                              line: CompleteTheme['axis']['domain']['line'];
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              ticks: {
                                                                                                                                                                                                                                                                              line: CompleteTheme['axis']['ticks']['line'];
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['axis']['ticks']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              legend: Partial<{
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['axis']['legend']['text']>;
                                                                                                                                                                                                                                                                              }>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              grid: {
                                                                                                                                                                                                                                                                              line: CompleteTheme['grid']['line'];
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              crosshair: {
                                                                                                                                                                                                                                                                              line: CompleteTheme['crosshair']['line'];
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              legends: {
                                                                                                                                                                                                                                                                              hidden: {
                                                                                                                                                                                                                                                                              symbol: CompleteTheme['legends']['hidden']['symbol'];
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['legends']['hidden']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              title: {
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['legends']['title']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['legends']['text']>;
                                                                                                                                                                                                                                                                              ticks: {
                                                                                                                                                                                                                                                                              line: CompleteTheme['legends']['ticks']['line'];
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['legends']['ticks']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              labels: {
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['labels']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              markers: Partial<CompleteTheme['markers']>;
                                                                                                                                                                                                                                                                              dots: {
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['dots']['text']>;
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              tooltip: CompleteTheme['tooltip'];
                                                                                                                                                                                                                                                                              annotations: {
                                                                                                                                                                                                                                                                              text: Partial<CompleteTheme['annotations']['text']>;
                                                                                                                                                                                                                                                                              link: CompleteTheme['annotations']['link'];
                                                                                                                                                                                                                                                                              outline: CompleteTheme['annotations']['outline'];
                                                                                                                                                                                                                                                                              symbol: CompleteTheme['annotations']['symbol'];
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                              • Required properties without inheritance.

                                                                                                                                                                                                                                                                                The theme supports defining styles at the top level (for text for example), which are then used to populate similar nested properties.

                                                                                                                                                                                                                                                                                For example text will be merged with axis.ticks.text, we use this approach so that it's simpler to define global styles.

                                                                                                                                                                                                                                                                              type ValueFormat

                                                                                                                                                                                                                                                                              type ValueFormat<Value, Context = void> =
                                                                                                                                                                                                                                                                              | string // d3 formatter
                                                                                                                                                                                                                                                                              // explicit formatting function
                                                                                                                                                                                                                                                                              | (Context extends void
                                                                                                                                                                                                                                                                              ? (value: Value) => string
                                                                                                                                                                                                                                                                              : (value: Value, context: Context) => string);

                                                                                                                                                                                                                                                                                Package Files (1)

                                                                                                                                                                                                                                                                                Dependencies (12)

                                                                                                                                                                                                                                                                                Dev Dependencies (0)

                                                                                                                                                                                                                                                                                No dev dependencies.

                                                                                                                                                                                                                                                                                Peer Dependencies (1)

                                                                                                                                                                                                                                                                                Badge

                                                                                                                                                                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@nivo/core.

                                                                                                                                                                                                                                                                                • Markdown
                                                                                                                                                                                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@nivo/core)
                                                                                                                                                                                                                                                                                • HTML
                                                                                                                                                                                                                                                                                  <a href="https://www.jsdocs.io/package/@nivo/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>