From 18f155f4880e9aa1c6a43cbaadc3f52ec2984daf Mon Sep 17 00:00:00 2001 From: "Jameela Kowsar Shaik (Zen3 Infosolutions America Inc)" Date: Fri, 9 Oct 2020 20:58:18 +0530 Subject: [PATCH 1/6] Vertical stacked bar chart minor edits --- .../CommonComponents/CartesianChart.base.tsx | 8 +++----- .../VerticalStackedBarChart.base.tsx | 14 +++++++------- packages/charting/src/utilities/utilities.ts | 9 ++++----- .../VerticalStackedBarChart.Styled.Example.tsx | 16 +++++++++++++--- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx index 074477a2049f26..6b03083a2edec8 100644 --- a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -15,7 +15,6 @@ import { createDateXAxis, createYAxis, createStringYAxis, - additionalMarginRight, IMargins, getMinMaxOfYAxis, XAxisTypes, @@ -200,7 +199,7 @@ export class CartesianChartBase extends React.Component {children} diff --git a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index f71c39de49f41a..8b86d2438c97be 100644 --- a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -21,7 +21,7 @@ import { IVSChartDataPoint, } from '../../index'; import { FocusZoneDirection } from '@fluentui/react-focus'; -import { ChartTypes, XAxisTypes, additionalMarginRight } from '../../utilities/index'; +import { ChartTypes, XAxisTypes } from '../../utilities/index'; const getClassNames = classNamesFunction(); type NumericAxis = D3Axis; @@ -374,8 +374,8 @@ export class VerticalStackedBarChartBase extends React.Component< }); }; - private _redirectToUrl(): void { - this.props.href ? (window.location.href = this.props.href) : ''; + private _redirectToUrl(href: string): void { + href ? (window.location.href = href) : ''; } private _getYMax(dataset: IDataPoint[]) { @@ -420,7 +420,7 @@ export class VerticalStackedBarChartBase extends React.Component< onMouseLeave: this._handleMouseOut, onFocus: this._onRectFocus.bind(this, point, singleChartData.xAxisPoint, color, refArrayIndexNumber), onBlur: this._handleMouseOut, - onClick: this._redirectToUrl, + onClick: this._redirectToUrl.bind(this, this.props.href!), }; return ( point.x as number)!; // barWidth / 2 - for to get tick middle of the bar const rMax = margins.left! + barWidth / 2; - const rMin = width - margins.right! - barWidth / 2 - (isRTL ? additionalMarginRight : 0); + const rMin = width - margins.right! - barWidth / 2 - (isRTL ? margins.right! : 0); return isRTL ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMax, rEndValue: rMin } : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMax, rEndValue: rMin }; diff --git a/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx index 1c6f3b2aed5f62..d78e11f9d8410f 100644 --- a/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx @@ -74,6 +74,11 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV const customStyles: IVerticalStackedBarChartProps['styles'] = () => { return { + xAxis: { + selectors: { + text: { fill: 'black', fontSize: '8px' }, + }, + }, chart: { paddingBottom: '45px', }, @@ -99,6 +104,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV height={this.state.height} width={this.state.width} yAxisTickCount={10} + // Just test link href={'www.google.com'} // eslint-disable-next-line react/jsx-no-bind styles={customStyles} @@ -109,7 +115,11 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV }} // eslint-disable-next-line react/jsx-no-bind yAxisTickFormat={(x: number | string) => `${x} h`} - margins={{ left: 50 }} + margins={{ + bottom: 40, + left: 45, + right: 30, + }} legendProps={{ allowFocusOnLegends: true, styles: { @@ -118,8 +128,8 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV }, }, }} - // eslint-disable-next-line react/jsx-no-bind - onRenderCalloutPerDataPoint={props => + // eslint-disable-next-line react/jsx-no-bind @typescript-eslint/no-explicit-any + onRenderCalloutPerDataPoint={(props: any) => props ? ( Date: Fri, 9 Oct 2020 20:59:44 +0530 Subject: [PATCH 2/6] Change files --- ...59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json | 8 ++++++++ ...59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json | 8 ++++++++ 2 files changed, 16 insertions(+) create mode 100644 change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json create mode 100644 change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json diff --git a/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json b/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json new file mode 100644 index 00000000000000..16e89827b1c7aa --- /dev/null +++ b/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "Vertical stacked bar chart minor edits", + "packageName": "@fluentui/react-examples", + "email": "email not defined", + "dependentChangeType": "patch", + "date": "2020-10-09T15:29:43.827Z" +} diff --git a/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json b/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json new file mode 100644 index 00000000000000..596a87f4f83f1d --- /dev/null +++ b/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "Vertical stacked bar chart minor edits", + "packageName": "@uifabric/charting", + "email": "email not defined", + "dependentChangeType": "patch", + "date": "2020-10-09T15:29:42.466Z" +} From 77abee42e42705b0deeff139b04a8e7709af44b2 Mon Sep 17 00:00:00 2001 From: "Jameela Kowsar Shaik (Zen3 Infosolutions America Inc)" Date: Fri, 9 Oct 2020 21:02:16 +0530 Subject: [PATCH 3/6] change files --- ...-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json | 4 ++-- ...-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json b/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json index 16e89827b1c7aa..2e8c5470490abd 100644 --- a/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json +++ b/change/@fluentui-react-examples-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json @@ -1,8 +1,8 @@ { "type": "patch", - "comment": "Vertical stacked bar chart minor edits", + "comment": "Vertical stacked bar chart styled examples code updated.", "packageName": "@fluentui/react-examples", - "email": "email not defined", + "email": "v-jasha@microsoft.com", "dependentChangeType": "patch", "date": "2020-10-09T15:29:43.827Z" } diff --git a/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json b/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json index 596a87f4f83f1d..6797621dd4acaa 100644 --- a/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json +++ b/change/@uifabric-charting-2020-10-09-20-59-43-user-v-jasha-VerticalStackedBarChrtIssueFix.json @@ -1,8 +1,8 @@ { "type": "patch", - "comment": "Vertical stacked bar chart minor edits", + "comment": "Vertical stacked bar chart uncaught type error fixed. Minor edits to margins", "packageName": "@uifabric/charting", - "email": "email not defined", + "email": "v-jasha@microsoft.com", "dependentChangeType": "patch", "date": "2020-10-09T15:29:42.466Z" } From b67c02f7c930ec85244924d1e9d20bfca1bb47f3 Mon Sep 17 00:00:00 2001 From: "Jameela Kowsar Shaik (Zen3 Infosolutions America Inc)" Date: Mon, 12 Oct 2020 12:44:21 +0530 Subject: [PATCH 4/6] margins default description added and minor changes to cartesian margins --- .../CommonComponents/CartesianChart.base.tsx | 15 +++++++++---- .../CommonComponents/CartesianChart.types.ts | 6 ++++++ .../VerticalStackedBarChart.base.tsx | 21 +++++++------------ packages/charting/src/utilities/utilities.ts | 12 +++++++---- 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx index 6b03083a2edec8..2d5b0bc57b62aa 100644 --- a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -59,11 +59,17 @@ export class CartesianChartBase extends React.Component {children} diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/charting/src/components/CommonComponents/CartesianChart.types.ts index 1949dd02999383..2f72c5e136efd4 100644 --- a/packages/charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/charting/src/components/CommonComponents/CartesianChart.types.ts @@ -157,6 +157,12 @@ export interface ICartesianChartProps { /** * Margins for the chart + * @default top: 20 + * @default bottom: 35 + * @default left: 40 + * @default right: 20 + * + * To avoid edge cuttings to the chart, we recommend you use default values or greater then default values */ margins?: IMargins; diff --git a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 8b86d2438c97be..7017a8575db6a1 100644 --- a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -374,9 +374,9 @@ export class VerticalStackedBarChartBase extends React.Component< }); }; - private _redirectToUrl(href: string): void { - href ? (window.location.href = href) : ''; - } + private _redirectToUrl = (): void => { + this.props.href ? (window.location.href = this.props.href) : ''; + }; private _getYMax(dataset: IDataPoint[]) { return Math.max(d3Max(dataset, (point: IDataPoint) => point.y)!, this.props.yMaxValue || 0); @@ -420,7 +420,7 @@ export class VerticalStackedBarChartBase extends React.Component< onMouseLeave: this._handleMouseOut, onFocus: this._onRectFocus.bind(this, point, singleChartData.xAxisPoint, color, refArrayIndexNumber), onBlur: this._handleMouseOut, - onClick: this._redirectToUrl.bind(this, this.props.href!), + onClick: this._redirectToUrl, }; return ( point.x as number)!; // barWidth / 2 - for to get tick middle of the bar const rMax = margins.left! + barWidth / 2; - const rMin = width - margins.right! - barWidth / 2 - (isRTL ? margins.right! : 0); + const rMin = width - margins.right! - barWidth / 2; return isRTL ? { dStartValue: xMax, dEndValue: xMin, rStartValue: rMax, rEndValue: rMin } : { dStartValue: xMin, dEndValue: xMax, rStartValue: rMax, rEndValue: rMin }; From c5ec75f32898b00694d71ec5934d51f16f758808 Mon Sep 17 00:00:00 2001 From: "Jameela Kowsar Shaik (Zen3 Infosolutions America Inc)" Date: Mon, 12 Oct 2020 15:26:36 +0530 Subject: [PATCH 5/6] lint warnings --- packages/charting/src/components/Legends/Legends.base.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/charting/src/components/Legends/Legends.base.tsx b/packages/charting/src/components/Legends/Legends.base.tsx index f3094c6be1f033..e355208fffaa57 100644 --- a/packages/charting/src/components/Legends/Legends.base.tsx +++ b/packages/charting/src/components/Legends/Legends.base.tsx @@ -298,7 +298,6 @@ export class LegendsBase extends React.Component { >
(this._hoverCardRef = rootElem)} {...(allowFocusOnLegends && { 'aria-expanded': this.state.isHoverCardVisible, @@ -378,7 +377,6 @@ export class LegendsBase extends React.Component { {...(data.nativeButtonProps && { ...data.nativeButtonProps })} key={index} className={classNames.legend} - /* eslint-disable react/jsx-no-bind */ onClick={onClickHandler} onMouseOver={onHoverHandler} onMouseOut={onMouseOut} From 3cc632947e4ea2577ee58810391ab7eed1737d4f Mon Sep 17 00:00:00 2001 From: "Jameela Kowsar Shaik (Zen3 Infosolutions America Inc)" Date: Tue, 13 Oct 2020 15:02:05 +0530 Subject: [PATCH 6/6] Non zero data, ref values updated --- .../CommonComponents/CartesianChart.base.tsx | 8 +- .../CommonComponents/CartesianChart.types.ts | 6 +- .../VerticalStackedBarChart.base.tsx | 94 +++++++------------ ...VerticalStackedBarChart.Styled.Example.tsx | 11 ++- 4 files changed, 46 insertions(+), 73 deletions(-) diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx index 2d5b0bc57b62aa..8a7335641e6149 100644 --- a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -66,10 +66,10 @@ export class CartesianChartBase extends React.Component; type NumericScale = D3ScaleLinear; type StringScale = D3ScaleLinear; const COMPONENT_NAME = 'VERTICAL STACKED BAR CHART'; -interface IBarRef { - index: number | string; - refElement: SVGGElement; + +interface IRefArrayData { + refElement?: SVGGElement | null; } export interface IVerticalStackedBarChartState extends IBasestate { @@ -50,8 +49,6 @@ export class VerticalStackedBarChartBase extends React.Component< private _barWidth: number; private _calloutId: string; private _classNames: IProcessedStyleSet; - private _refArray: IRefArrayData[]; - private _barRefArray: IBarRef[]; private _colors: string[]; private margins: IMargins; private _isRtl: boolean = getRTL(); @@ -78,8 +75,6 @@ export class VerticalStackedBarChartBase extends React.Component< this._onLegendLeave = this._onLegendLeave.bind(this); this._handleMouseOut = this._handleMouseOut.bind(this); this._calloutId = getId('callout'); - this._refArray = []; - this._barRefArray = []; this._adjustProps(); this._dataset = this._createDataSetLayer(); } @@ -280,14 +275,6 @@ export class VerticalStackedBarChartBase extends React.Component< ); } - private _refCallback(rectElement: SVGRectElement, legendTitle: string, index: number): void { - this._refArray[index] = { index: legendTitle, refElement: rectElement }; - } - - private _barRefCallback = (barElement: SVGGElement, index: number, xAxisPoint: number | string): void => { - this._barRefArray[index] = { index: xAxisPoint, refElement: barElement }; - }; - private _onRectHover( xAxisPoint: string, point: IVSChartDataPoint, @@ -327,44 +314,36 @@ export class VerticalStackedBarChartBase extends React.Component< }); }; - private _onRectFocus(point: IVSChartDataPoint, xAxisPoint: string, color: string, refArrayIndexNumber: number): void { + private _onRectFocus(point: IVSChartDataPoint, xAxisPoint: string, color: string, ref: IRefArrayData): void { if ( this.state.isLegendSelected === false || (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend) ) { - this._refArray.forEach((obj: IRefArrayData, index: number) => { - if (obj.index === point.legend && refArrayIndexNumber === index) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - selectedLegendTitle: point.legend, - dataForHoverCard: point.data, - color: color, - xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint, - yCalloutValue: point.yAxisCalloutData, - dataPointCalloutProps: point, - }); - } + this.setState({ + refSelected: ref.refElement, + isCalloutVisible: true, + selectedLegendTitle: point.legend, + dataForHoverCard: point.data, + color: color, + xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint, + yCalloutValue: point.yAxisCalloutData, + dataPointCalloutProps: point, }); } } - private _onStackFocus = (xAxisPoint: string | number): void => { + private _onStackFocus = (xAxisPoint: string | number, groupRef: IRefArrayData): void => { const found = find( this._points, (sinlgePoint: { xAxisPoint: string | number; chartData: IVSChartDataPoint[] }) => sinlgePoint.xAxisPoint === xAxisPoint, ); - this._barRefArray.forEach((obj: IBarRef) => { - if (obj.index === xAxisPoint) { - this.setState({ - refSelected: obj.refElement, - isCalloutVisible: true, - YValueHover: found!.chartData, - hoverXValue: xAxisPoint, - stackCalloutProps: found!, - }); - } + this.setState({ + refSelected: groupRef.refElement, + isCalloutVisible: true, + YValueHover: found!.chartData, + hoverXValue: xAxisPoint, + stackCalloutProps: found!, }); }; @@ -391,10 +370,18 @@ export class VerticalStackedBarChartBase extends React.Component< let startingPointOfY = 0; const isCalloutForStack = this.props.isCalloutForStack || false; - const singleBar = singleChartData.chartData.map((point: IVSChartDataPoint, index: number) => { + let xPoint: number | string; + if (this._isNumeric) { + xPoint = xBarScale(singleChartData.xAxisPoint as number); + } else { + xPoint = xBarScale(indexNumber); + } + // Removing datapoints with zero data + const nonZeroBars = singleChartData.chartData.filter(point => point.data > 0); + const singleBar = nonZeroBars.map((point: IVSChartDataPoint, index: number) => { startingPointOfY = startingPointOfY + point.data; const color = point.color ? point.color : this._colors[index]; - const refArrayIndexNumber = indexNumber * singleChartData.chartData.length + index; + const ref: IRefArrayData = {}; let shouldHighlight = true; if (this.state.isLegendHovered || this.state.isLegendSelected) { @@ -405,20 +392,13 @@ export class VerticalStackedBarChartBase extends React.Component< shouldHighlight: shouldHighlight, href: this.props.href, }); - let xPoint; - if (this._isNumeric) { - xPoint = xBarScale(singleChartData.xAxisPoint as number); - } else { - xPoint = xBarScale(indexNumber); - } - const rectFocusProps = !isCalloutForStack && { 'data-is-focusable': true, 'aria-labelledby': this._calloutId, onMouseOver: this._onRectHover.bind(this, singleChartData.xAxisPoint, point), onMouseMove: this._onRectHover.bind(this, singleChartData.xAxisPoint, point), onMouseLeave: this._handleMouseOut, - onFocus: this._onRectFocus.bind(this, point, singleChartData.xAxisPoint, color, refArrayIndexNumber), + onFocus: this._onRectFocus.bind(this, point, singleChartData.xAxisPoint, color, ref), onBlur: this._handleMouseOut, onClick: this._redirectToUrl, }; @@ -431,19 +411,18 @@ export class VerticalStackedBarChartBase extends React.Component< width={this._barWidth} height={Math.max(yBarScale(point.data), 0)} fill={color} - ref={(e: SVGRectElement) => { - this._refCallback(e, point.legend, refArrayIndexNumber); - }} + ref={e => (ref.refElement = e)} {...rectFocusProps} /> ); }); + const groupRef: IRefArrayData = {}; const stackFocusProps = isCalloutForStack && { 'data-is-focusable': true, onMouseOver: this._onStackHover.bind(this, singleChartData.xAxisPoint), onMouseMove: this._onStackHover.bind(this, singleChartData.xAxisPoint), onMouseLeave: this._handleMouseOut, - onFocus: this._onStackFocus.bind(this, singleChartData.xAxisPoint), + onFocus: this._onStackFocus.bind(this, singleChartData.xAxisPoint, groupRef), onBlur: this._handleMouseOut, onClick: this._redirectToUrl, }; @@ -452,9 +431,7 @@ export class VerticalStackedBarChartBase extends React.Component< key={indexNumber} id={`${indexNumber}-singleBar`} data-is-focusable={this.props.isCalloutForStack} - ref={(gElement: SVGGElement) => { - this._barRefCallback(gElement, indexNumber, singleChartData.xAxisPoint); - }} + ref={e => (groupRef.refElement = e)} {...stackFocusProps} > {singleBar} @@ -482,7 +459,6 @@ export class VerticalStackedBarChartBase extends React.Component< private _createStringBars = (containerHeight: number, containerWidth: number): JSX.Element[] => { const yMax = this._getYMax(this._dataset); const endpointDistance = 0.5 * ((containerWidth - this.margins.right!) / this._dataset.length); - const xBarScale = d3ScaleLinear() .domain(this._isRtl ? [this._dataset.length - 1, 0] : [0, this._dataset.length - 1]) .range([ diff --git a/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx index d78e11f9d8410f..9ae6917584fd8b 100644 --- a/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx @@ -37,7 +37,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV const firstChartPoints: IVSChartDataPoint[] = [ { legend: 'Metadata1', data: 40, color: DefaultPalette.accent }, { legend: 'Metadata2', data: 5, color: DefaultPalette.blueMid }, - { legend: 'Metadata3', data: 15, color: DefaultPalette.blueLight }, + { legend: 'Metadata3', data: 0, color: DefaultPalette.blueLight }, ]; const secondChartPoints: IVSChartDataPoint[] = [ @@ -116,9 +116,10 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV // eslint-disable-next-line react/jsx-no-bind yAxisTickFormat={(x: number | string) => `${x} h`} margins={{ - bottom: 40, - left: 45, - right: 30, + bottom: 0, + top: 0, + left: 0, + right: 0, }} legendProps={{ allowFocusOnLegends: true, @@ -128,7 +129,7 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV }, }, }} - // eslint-disable-next-line react/jsx-no-bind @typescript-eslint/no-explicit-any + // eslint-disable-next-line react/jsx-no-bind, @typescript-eslint/no-explicit-any onRenderCalloutPerDataPoint={(props: any) => props ? (