CartesianGrid

Props

• fillstringoptional

  The background color used to fill the space between grid lines

  DEFAULT: "none"

  FORMAT:

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

• fillOpacitynumber | stringoptional

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

  FORMAT:

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

• heightnumber | stringoptional

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

• horizontal(union of 5 variants)optional

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

  DEFAULT: true

• horizontalCoordinatesGeneratorHorizontalCoordinatesGeneratoroptional

  A function that generates the y-coordinates of all horizontal lines.

  Examples:

  • Cartesian grid with coordinate generators

• horizontalFillArray<string>optional

  Defines background color of stripes.

  The values from this array will be passed in as the fill property in a rect SVG element. For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect

  In case there are more stripes than colors, the colors will start from beginning. So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black

  If this is undefined, or an empty array, then there is no background fill. Note: Grid lines will be rendered above these background stripes.

  DEFAULT: []

• horizontalPointsArray<number>optional

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

  DEFAULT: []

• horizontalValuesArray<number> | Array<string>optional

  Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type. Has priority over syncWithTicks but not over horizontalPoints.

• strokeDasharraynumber | stringoptional

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

  FORMAT:

  <CartesianGrid strokeDasharray="3 3" />
  <CartesianGrid strokeDasharray={[5, 5, 1, 5]} />
  <CartesianGrid strokeDasharray="5 5 1 5" />

  Examples:

  • stroke-dasharray on MDN
  • Simple Area Chart
  • Stacked Area Chart
  • Area Chart Connect Nulls
  • Cardinal Area Chart
  • Percent Area Chart
  • Synchronized Area Chart
  • Area Chart Fill By Value
  • Simple Bar Chart
  • Stacked Bar Chart
  • Mix Bar Chart

• syncWithTicksbooleanoptional

  If true, only the lines that correspond to the axes ticks values will be drawn. If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks. horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.

  DEFAULT: false

• vertical(union of 5 variants)optional

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

  DEFAULT: true

  Examples:

  • Candlestick
  • Target Price Chart with active Label

• verticalCoordinatesGeneratorVerticalCoordinatesGeneratoroptional

  A function that generates the x-coordinates of all vertical lines.

  Examples:

  • Cartesian grid with coordinate generators

• verticalFillArray<string>optional

  Defines background color of stripes.

  The values from this array will be passed in as the fill property in a rect SVG element. For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect

  In case there are more stripes than colors, the colors will start from beginning. So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black

  If this is undefined, or an empty array, then there is no background fill. Note: Grid lines will be rendered above these background stripes.

  DEFAULT: []

• verticalPointsArray<number>optional

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

  DEFAULT: []

• verticalValuesArray<number> | Array<string>optional

  Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type. Has priority over syncWithTicks but not over verticalPoints.

• widthnumber | stringoptional

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

• xnumber | stringoptional

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

• xAxisIdnumber | stringoptional

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

  DEFAULT: 0

• ynumber | stringoptional

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

• yAxisIdnumber | stringoptional

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

  DEFAULT: 0

• zIndexnumberoptional

  DEFAULT: -100