The Chart Component

The Chart is the base component used to render all chart elements. It is responsible for creating the basic dimensions of the Chart in pixels, and the visible portion of the chart coordinates on the Cartesian scale.

Props

view(required)[number, number, number, number]
The coordinates of the box containing the visible portion of the chart data. Given as an array in the form: [x minimum, y minimum, width, height] on the Cartesian scale.
ssWidthnumber
Rendered width of the Chart during server-side rendering. During client-side rendering, the width is determined by layout calculated by the browser, which will usually be the width of the Chart's containing element, or the maxWidth property.
Default:300
maxWidthnumber | string
CSS property used to contain the Chart's width. May be a number (`300`) or a string (`"100%"`). If this value is left undefined, the Chart will normally expand horizontally to fill its container.
heightnumber | (number => number)
Rendered height in pixels. If a function is given, the height will be calculated from the rendered width.
Default:150
gutter[number, number, number, number]
Extra padding (given in pixels) added to each side of the chart. This is useful for ensuring that axes and other Chart decorations have enough space for proper rendering regardless, of the actual dimensions available. Given in the form [top, right, bottom, left], on the pixel scale.
chartStyle
Sets styles which will apply to all chart elements. See ChartStyle.
onGesture
Handler for gestures, usually (but not necessarily) used to dynamically change the `view`. See how to handle gestures.
htmlLayer
A React component (or array of React components) which render HTML, and are absolutely positioned above the SVG (or canvas). Can be used to render tooltips (though they don't have to be). See tooltips for more information.
renderErrorReact.Component{ message: string }>
A React component which will be rendered in case of an error that occurs while rendering the chart. The component may accept the error `message` as its only prop.

Additionally, the chart element accepts all the pointer event handlers.