CartesianGrid

Parent Components

Properties

  • xNumber

    The x-coordinate of grid.

    DEFAULT: 0

  • yNumber

    The y-coordinate of grid.

    DEFAULT: 0

  • widthNumber

    The width of grid.

    DEFAULT: 0

  • heightNumber

    The height of grid.

    DEFAULT: 0

  • horizontalBoolean

    If set false, no horizontal grid lines will be drawn.

    DEFAULT: true

  • verticalBoolean

    If set false, no vertical grid lines will be drawn.

    DEFAULT: true

  • horizontalPointsArray

    The y-coordinates of all horizontal lines.

    DEFAULT: []

  • horizontalCoordinatesGeneratorFunctionoptional

    A function that generates the y-coordinates of all horizontal lines. The generator gets passed an object of the shape { yAxis, width, height, offset }.

    FORMAT: 

    <CartesianGrid strokeDasharray="3 3" horizontalCoordinatesGenerator={(props) => props.height > 250 ? [75, 150, 225] : [100, 200]} />

    Examples:

  • verticalPointsArray

    The x-coordinates of all vertical lines.

    DEFAULT: []

  • verticalCoordinatesGeneratorFunctionoptional

    A function that generates the x-coordinates of all vertical lines. The generator gets passed an object of the shape { xAxis, width, height, offset }.

    FORMAT: 

    <CartesianGrid strokeDasharray="3 3" verticalCoordinatesGenerator={(props) => props.width > 450 ? [150, 300, 450] : [200, 400]} />

    Examples:

  • fillStringoptional

    The background color used to fill the space between grid lines

    FORMAT: 

    <CartesianGrid strokeDasharray="3 3" fill="red" />
<CartesianGrid strokeDasharray="3 3" fill="#ccc" />

  • fillOpacityNumberoptional

    The opacity of the background used to fill the space between grid lines

    FORMAT: 

    <CartesianGrid strokeDasharray="3 3" fill="red" fillOpacity={0.6} />

  • strokeDasharrayStringoptional

    The pattern of dashes and gaps used to paint the lines of the grid

    FORMAT: 

    <CartesianGrid strokeDasharray="4" />
<CartesianGrid strokeDasharray="4 1" />
<CartesianGrid strokeDasharray="4 1 2" />

  • xAxisIdString | Numberoptional

    The id of x-axis which you would like to add grid lines for. Must match if xAxisId is set on XAxis or a graphical component .

    DEFAULT: 0

    FORMAT: 

    <CartesianGrid xAxisId="top" />
<XAxis xAxisId="top" />
<Bar dataKey="temp" xAxisId="top" />

  • yAxisIdString | Numberoptional

    The id of y-axis which you would like to add grid lines for. Must match if yAxisId is set on YAxis or a graphical component.

    DEFAULT: 0

    FORMAT: 

    <CartesianGrid yAxisId="left" />
<YAxis yAxisId="left" />
<Bar dataKey="temp" yAxisId="left" />