diff --git a/docs/data/charts/zoom-and-pan/ZoomSlider.js b/docs/data/charts/zoom-and-pan/ZoomSlider.js index 9c761b1cb3eab..53f17cdc96f8d 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSlider.js +++ b/docs/data/charts/zoom-and-pan/ZoomSlider.js @@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({ })); const series2Data = Array.from({ length: dataLength }).map((_, i) => ({ x: i, - y: 50 + Math.sin(i / 5) * 25, + y: 50 + Math.sin(i / 10) * 25, })); const xData = data.map((d) => d.x); @@ -38,12 +38,23 @@ export default function ZoomSlider() { }, ]} yAxis={[ - { zoom: { slider: { enabled: true } } }, - { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } }, + { id: 'y', width: 28, zoom: { slider: { enabled: true } } }, + { + id: 'y2', + position: 'right', + width: 28, + zoom: { slider: { enabled: true } }, + }, ]} series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]} height={400} margin={{ bottom: 40 }} + initialZoom={[ + { axisId: 'x', start: 10, end: 90 }, + { axisId: 'x2', start: 30, end: 70 }, + { axisId: 'y', start: 10, end: 90 }, + { axisId: 'y2', start: 30, end: 70 }, + ]} /> ); } diff --git a/docs/data/charts/zoom-and-pan/ZoomSlider.tsx b/docs/data/charts/zoom-and-pan/ZoomSlider.tsx index d3cabb4277e0d..942a9de7e4941 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSlider.tsx +++ b/docs/data/charts/zoom-and-pan/ZoomSlider.tsx @@ -8,7 +8,7 @@ const data = Array.from({ length: dataLength }).map((_, i) => ({ })); const series2Data = Array.from({ length: dataLength }).map((_, i) => ({ x: i, - y: 50 + Math.sin(i / 5) * 25, + y: 50 + Math.sin(i / 10) * 25, })); const xData = data.map((d) => d.x); @@ -38,12 +38,23 @@ export default function ZoomSlider() { }, ]} yAxis={[ - { zoom: { slider: { enabled: true } } }, - { id: 'y2', position: 'right', zoom: { slider: { enabled: true } } }, + { id: 'y', width: 28, zoom: { slider: { enabled: true } } }, + { + id: 'y2', + position: 'right', + width: 28, + zoom: { slider: { enabled: true } }, + }, ]} series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]} height={400} margin={{ bottom: 40 }} + initialZoom={[ + { axisId: 'x', start: 10, end: 90 }, + { axisId: 'x2', start: 30, end: 70 }, + { axisId: 'y', start: 10, end: 90 }, + { axisId: 'y2', start: 30, end: 70 }, + ]} /> ); } diff --git a/docs/data/charts/zoom-and-pan/zoom-and-pan.md b/docs/data/charts/zoom-and-pan/zoom-and-pan.md index f420405f6d88e..0f75e1ee25dfd 100644 --- a/docs/data/charts/zoom-and-pan/zoom-and-pan.md +++ b/docs/data/charts/zoom-and-pan/zoom-and-pan.md @@ -62,8 +62,6 @@ You can provide an overview and allow the manipulation of the zoomed area by set {{"demo": "ZoomSlider.js"}} -Optionally, you can set the `zoom.slider.size` property to customize the zoom slider's size, that is, the height on an x-axis and the width on a y-axis. - ### Composition When using composition, you can render the axes' sliders by rendering the `ChartZoomSlider` component. diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index 1441d43444247..e131f428344f4 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -92,13 +92,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 94eadda020981..4e3ed678e4e8b 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -84,13 +84,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "zAxis": { diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index c5ed19d0226ca..96b4c80e20810 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -89,13 +89,13 @@ "xAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'x', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "yAxis": { "type": { "name": "arrayOf", - "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, size?: number }, step?: number }
| bool }>" + "description": "Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }
| { axis?: 'y', classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool }, step?: number }
| bool }>" } }, "zAxis": { diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index b1b4c6da265b0..9046b861947c2 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -376,7 +376,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -466,7 +465,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -547,7 +545,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -628,7 +625,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -709,7 +705,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -790,7 +785,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -871,7 +865,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -952,7 +945,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1052,7 +1044,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1141,7 +1132,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1221,7 +1211,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1301,7 +1290,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1381,7 +1369,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1461,7 +1448,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1541,7 +1527,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1621,7 +1606,6 @@ BarChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), diff --git a/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx b/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx index 671b1bf763119..496e88458c07f 100644 --- a/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx +++ b/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx @@ -20,9 +20,7 @@ export function ChartZoomSlider() { return null; } - return ( - - ); + return ; })} {yAxisIds.map((axisId) => { const yAxis = yAxes[axisId]; @@ -33,9 +31,7 @@ export function ChartZoomSlider() { return null; } - return ( - - ); + return ; })} ); diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx index adbfdcfeef50b..b2a55c8d4d0e3 100644 --- a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx +++ b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx @@ -11,6 +11,7 @@ import { useSelector, useStore, ZoomData, + ZOOM_SLIDER_MARGIN, } from '@mui/x-charts/internals'; import { styled } from '@mui/material/styles'; import { useXAxes, useYAxes } from '@mui/x-charts/hooks'; @@ -25,9 +26,8 @@ const BackgroundRect = styled('rect')(({ theme }) => ({ '&': { fill: theme.palette.mode === 'dark' - ? (theme.vars || theme).palette.grey[900] + ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300], - opacity: 0.8, }, })); @@ -35,15 +35,12 @@ const ZoomRangePreviewRect = styled('rect')(({ theme }) => ({ '&': { fill: theme.palette.mode === 'dark' - ? (theme.vars || theme).palette.grey[800] - : (theme.vars || theme).palette.grey[500], - opacity: 0.4, + ? (theme.vars || theme).palette.grey[500] + : (theme.vars || theme).palette.grey[600], cursor: 'grab', }, })); -const PREVIEW_HANDLE_WIDTH = 4; - interface ChartZoomSliderProps { /** * The ID of the axis this overview refers to. @@ -53,18 +50,24 @@ interface ChartZoomSliderProps { * The direction of the axis. */ axisDirection: 'x' | 'y'; - /** - * The size of the overview. - * This represents the height if the axis is an x-axis, or the width if the axis is a y-axis. - */ - size: number; } +const ZOOM_SLIDER_BACKGROUND_SIZE = 8; +const ZOOM_SLIDER_FOREGROUND_SIZE = 10; +const ZOOM_SLIDER_HANDLE_HEIGHT = 20; +const ZOOM_SLIDER_HANDLE_WIDTH = 10; +const ZOOM_SLIDER_SIZE = Math.max( + ZOOM_SLIDER_BACKGROUND_SIZE, + ZOOM_SLIDER_FOREGROUND_SIZE, + ZOOM_SLIDER_HANDLE_HEIGHT, + ZOOM_SLIDER_HANDLE_WIDTH, +); + /** * Renders the zoom slider for a specific axis. * @internal */ -export function ChartAxisZoomSlider({ size, axisDirection, axisId }: ChartZoomSliderProps) { +export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderProps) { const store = useStore(); const drawingArea = useDrawingArea(); const zoomData = useSelector(store, selectorChartAxisZoomData, axisId); @@ -91,8 +94,8 @@ export function ChartAxisZoomSlider({ size, axisDirection, axisId }: ChartZoomSl x = drawingArea.left; y = axis.position === 'bottom' - ? drawingArea.top + drawingArea.height + axis.offset + axisSize - : drawingArea.top - axis.offset - axisSize - size; + ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN + : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN; reverse = axis.reverse ?? false; } else { const axis = yAxis[axisId]; @@ -105,20 +108,25 @@ export function ChartAxisZoomSlider({ size, axisDirection, axisId }: ChartZoomSl x = axis.position === 'right' - ? drawingArea.left + drawingArea.width + axis.offset + axisSize - : drawingArea.left - axis.offset - axisSize - size; + ? drawingArea.left + drawingArea.width + axis.offset + axisSize + ZOOM_SLIDER_MARGIN + : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN; y = drawingArea.top; reverse = axis.reverse ?? false; } + const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2; + return ( (); const drawingArea = useDrawingArea(); const activePreviewRectRef = React.useRef(null); - const previewHandleWidth = axisDirection === 'x' ? PREVIEW_HANDLE_WIDTH : 0.6 * size; - const previewHandleHeight = axisDirection === 'x' ? 0.6 * size : PREVIEW_HANDLE_WIDTH; + const previewHandleWidth = + axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_WIDTH : ZOOM_SLIDER_HANDLE_HEIGHT; + const previewHandleHeight = + axisDirection === 'x' ? ZOOM_SLIDER_HANDLE_HEIGHT : ZOOM_SLIDER_HANDLE_WIDTH; React.useEffect(() => { const activePreviewRect = activePreviewRectRef.current; @@ -330,12 +338,12 @@ function ChartAxisZoomSliderSpan({ previewX = (zoomData.start / 100) * drawingArea.width; previewY = 0; previewWidth = (drawingArea.width * (zoomData.end - zoomData.start)) / 100; - previewHeight = size; + previewHeight = ZOOM_SLIDER_FOREGROUND_SIZE; startHandleX = (zoomData.start / 100) * drawingArea.width; - startHandleY = (size - previewHandleHeight) / 2; + startHandleY = 0; endHandleX = (zoomData.end / 100) * drawingArea.width; - endHandleY = (size - previewHandleHeight) / 2; + endHandleY = 0; if (reverse) { previewX = drawingArea.width - previewX - previewWidth; @@ -349,12 +357,12 @@ function ChartAxisZoomSliderSpan({ } else { previewX = 0; previewY = drawingArea.height - (zoomData.end / 100) * drawingArea.height; - previewWidth = size; + previewWidth = ZOOM_SLIDER_FOREGROUND_SIZE; previewHeight = (drawingArea.height * (zoomData.end - zoomData.start)) / 100; - startHandleX = (size - previewHandleWidth) / 2; + startHandleX = 0; startHandleY = drawingArea.height - (zoomData.start / 100) * drawingArea.height; - endHandleX = (size - previewHandleWidth) / 2; + endHandleX = 0; endHandleY = drawingArea.height - (zoomData.end / 100) * drawingArea.height; if (reverse) { @@ -368,12 +376,14 @@ function ChartAxisZoomSliderSpan({ endHandleY -= previewHandleHeight / 2; } + const previewOffset = (ZOOM_SLIDER_HANDLE_HEIGHT - ZOOM_SLIDER_FOREGROUND_SIZE) / 2; + return ( diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.tsx index f52ff78980b5e..73fa68f8b8db9 100644 --- a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.tsx +++ b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderHandle.tsx @@ -14,7 +14,11 @@ const Rect = styled('rect')(({ theme }) => ({ [`&.${chartAxisZoomSliderHandleClasses.root}`]: { fill: theme.palette.mode === 'dark' - ? (theme.vars || theme).palette.grey[700] + ? (theme.vars || theme).palette.grey[300] + : (theme.vars || theme).palette.common.white, + stroke: + theme.palette.mode === 'dark' + ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500], }, [`&.${chartAxisZoomSliderHandleClasses.horizontal}`]: { @@ -43,7 +47,7 @@ export const ChartAxisZoomSliderHandle = React.forwardRef< SVGRectElement, ChartZoomSliderHandleProps >(function ChartPreviewHandle( - { x, y, width, height, onResize, orientation, placement, rx = 2, ry = 2 }, + { x, y, width, height, onResize, orientation, placement, rx = 4, ry = 4 }, forwardedRef, ) { const classes = useUtilityClasses({ onResize, orientation, placement }); diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index f072fa2ded7c8..07f5ed8fd4d87 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -381,7 +381,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -471,7 +470,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -552,7 +550,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -633,7 +630,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -714,7 +710,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -795,7 +790,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -876,7 +870,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -957,7 +950,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1057,7 +1049,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1146,7 +1137,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1226,7 +1216,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1306,7 +1295,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1386,7 +1374,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1466,7 +1453,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1546,7 +1532,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1626,7 +1611,6 @@ LineChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index a041bec73d39d..afa0d3e23c1fc 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -366,7 +366,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -456,7 +455,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -537,7 +535,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -618,7 +615,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -699,7 +695,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -780,7 +775,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -861,7 +855,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -942,7 +935,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1042,7 +1034,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1131,7 +1122,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1211,7 +1201,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1291,7 +1280,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1371,7 +1359,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1451,7 +1438,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1531,7 +1517,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), @@ -1611,7 +1596,6 @@ ScatterChartPro.propTypes = { panning: PropTypes.bool, slider: PropTypes.shape({ enabled: PropTypes.bool, - size: PropTypes.number, }), step: PropTypes.number, }), diff --git a/packages/x-charts/src/constants/index.ts b/packages/x-charts/src/constants/index.ts index 81be7abe1f964..895f1f71cfc1a 100644 --- a/packages/x-charts/src/constants/index.ts +++ b/packages/x-charts/src/constants/index.ts @@ -11,7 +11,5 @@ export const DEFAULT_MARGINS = { export const DEFAULT_AXIS_SIZE_WIDTH = 45; export const DEFAULT_AXIS_SIZE_HEIGHT = 25; -export const DEFAULT_ZOOM_SLIDER_SIZE = 30; - // How many pixels to add to the default axis size if that axis has a label export const AXIS_LABEL_DEFAULT_HEIGHT = 20; diff --git a/packages/x-charts/src/internals/constants.ts b/packages/x-charts/src/internals/constants.ts new file mode 100644 index 0000000000000..eca7379fb4431 --- /dev/null +++ b/packages/x-charts/src/internals/constants.ts @@ -0,0 +1,5 @@ +/** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */ +export const ZOOM_SLIDER_MARGIN = 4; + +/** Size reserved for the zoom slider. The actual size of the slider might be smaller. */ +export const ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN; diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index b35d6dc54b502..ad13dea984a89 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -64,3 +64,5 @@ export * from '../models/axis'; export * from './plugins/models'; export * from './material'; export * from './createSvgIcon'; + +export * from './constants'; diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.ts index eb60582d351a1..aa512c368e199 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeAxis.ts @@ -1,3 +1,4 @@ +import { ZOOM_SLIDER_SIZE } from '../../../constants'; import { defaultizeZoom } from './defaultizeZoom'; import { ZoomOptions } from './zoom.types'; import { @@ -52,7 +53,7 @@ export function defaultizeXAxis( offsets[position] += sharedConfig.height; if (sharedConfig.zoom?.slider.enabled) { - offsets[position] += sharedConfig.zoom.slider.size; + offsets[position] += ZOOM_SLIDER_SIZE; } } @@ -112,7 +113,7 @@ export function defaultizeYAxis( offsets[position] += sharedConfig.width; if (sharedConfig.zoom?.slider.enabled) { - offsets[position] += sharedConfig.zoom.slider.size; + offsets[position] += ZOOM_SLIDER_SIZE; } } diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts index 0f14b875db7c5..0fbefe81aa9e6 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts @@ -1,4 +1,3 @@ -import { DEFAULT_ZOOM_SLIDER_SIZE } from '../../../../constants'; import { AxisId } from '../../../../models/axis'; import { DefaultizedZoomOptions } from './useChartCartesianAxis.types'; import { ZoomOptions } from './zoom.types'; @@ -11,7 +10,7 @@ const defaultZoomOptions = { maxSpan: 100, panning: true, filterMode: 'keep', - slider: { enabled: false, size: DEFAULT_ZOOM_SLIDER_SIZE }, + slider: { enabled: false }, } satisfies Omit; export const defaultizeZoom = ( diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts index 18cf100a78292..92f84ee1f50f3 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.ts @@ -1,3 +1,4 @@ +import { ZOOM_SLIDER_SIZE } from '../../../constants'; import { selectorChartRawXAxis, selectorChartRawYAxis, @@ -8,7 +9,7 @@ export const selectorChartLeftAxisSize = createSelector([selectorChartRawYAxis], (yAxis ?? []).reduce( (acc, axis) => axis.position === 'left' - ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) + ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0, ), @@ -18,7 +19,7 @@ export const selectorChartRightAxisSize = createSelector([selectorChartRawYAxis] (yAxis ?? []).reduce( (acc, axis) => axis.position === 'right' - ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) + ? acc + (axis.width || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0, ), @@ -28,7 +29,7 @@ export const selectorChartTopAxisSize = createSelector([selectorChartRawXAxis], (xAxis ?? []).reduce( (acc, axis) => axis.position === 'top' - ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) + ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0, ), @@ -38,7 +39,7 @@ export const selectorChartBottomAxisSize = createSelector([selectorChartRawXAxis (xAxis ?? []).reduce( (acc, axis) => axis.position === 'bottom' - ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? axis.zoom.slider.size : 0) + ? acc + (axis.height || 0) + (axis.zoom?.slider.enabled ? ZOOM_SLIDER_SIZE : 0) : acc, 0, ), diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts index 5b7ab3ad88258..6335faa98305c 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts @@ -82,13 +82,6 @@ export interface ZoomSliderOptions { * If `true`, the slider will be shown. */ enabled?: boolean; - /** - * The size of the slider. - * This is the height of the slider for the x-axis and the width of the slider for the y-axis. - * - * @default 30 - */ - size?: number; } export type ZoomAxisFilters = Record; diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index 4d7f372f804bb..eb586847ac35a 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -163,7 +163,6 @@ { "name": "DEFAULT_ROTATION_AXIS_KEY", "kind": "Variable" }, { "name": "DEFAULT_X_AXIS_KEY", "kind": "Variable" }, { "name": "DEFAULT_Y_AXIS_KEY", "kind": "Variable" }, - { "name": "DEFAULT_ZOOM_SLIDER_SIZE", "kind": "Variable" }, { "name": "DefaultizedBarSeriesType", "kind": "Interface" }, { "name": "DefaultizedCartesianSeriesType", "kind": "TypeAlias" }, { "name": "DefaultizedFunnelSeriesType", "kind": "Interface" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 97b5eadefa37a..b56db634e86d4 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -153,7 +153,6 @@ { "name": "DEFAULT_ROTATION_AXIS_KEY", "kind": "Variable" }, { "name": "DEFAULT_X_AXIS_KEY", "kind": "Variable" }, { "name": "DEFAULT_Y_AXIS_KEY", "kind": "Variable" }, - { "name": "DEFAULT_ZOOM_SLIDER_SIZE", "kind": "Variable" }, { "name": "DefaultizedBarSeriesType", "kind": "Interface" }, { "name": "DefaultizedCartesianSeriesType", "kind": "TypeAlias" }, { "name": "DefaultizedLineSeriesType", "kind": "Interface" },