CartesianGrid

Properties

• xNumber

  The x-coordinate of grid. If left undefined, it will be computed from the chart's offset and margins.

• yNumber

  The y-coordinate of grid. If left undefined, it will be computed from the chart's offset and margins.

• widthNumber

  The width of grid. If undefined, covers the full width of the chart plot area.

• heightNumber

  The height of grid. If undefined, covers the full height of the chart plot area.

• 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

  Array of coordinates in pixels where to draw horizontal grid lines. Has priority over syncWithTicks and horizontalValues.

  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:

  • Cartesian grid with coordinate generators

• verticalPointsArray

  Array of coordinates in pixels where to draw vertical grid lines. Has priority over syncWithTicks and verticalValues.

  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:

  • Cartesian grid with coordinate generators

• fillStringoptional

  The background color used to fill the space between grid lines

  DEFAULT: "none"

  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 | Number

  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.

  DEFAULT: 0

• yAxisIdString | Number

  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.

  DEFAULT: 0