diff --git a/change/@fluentui-react-charting-7f407eb6-bf88-4892-86f6-de3a18736f8b.json b/change/@fluentui-react-charting-7f407eb6-bf88-4892-86f6-de3a18736f8b.json new file mode 100644 index 00000000000000..157b74502e849c --- /dev/null +++ b/change/@fluentui-react-charting-7f407eb6-bf88-4892-86f6-de3a18736f8b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Declarative chart bug fixes", + "packageName": "@fluentui/react-charting", + "email": "74965306+Anush2303@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 5fd4e09b3330da..3de014b017e005 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -331,12 +331,13 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = ( }) .flat(); - const chartHeight = layout.height || 350; + const chartHeight = layout.height || 450; const margin = layout.margin?.l || 0; const padding = layout.margin?.pad || 0; const availableHeight = chartHeight - margin - padding; const numberOfBars = data[0].y.length; - const gapFactor = 0.5; + const scalingFactor = 0.01; + const gapFactor = 1 / (1 + scalingFactor * numberOfBars); const barHeight = availableHeight / (numberOfBars * (1 + gapFactor)); return { @@ -381,8 +382,10 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr }; // Convert normalized values to actual values - const domainValuesForColorScale: number[] = firstData.colorscale?.map((arr: any) => arr[0] * (zMax - zMin) + zMin); - const rangeValuesForColorScale: string[] = firstData.colorscale?.map((arr: any) => arr[1]); + const domainValuesForColorScale: number[] = firstData.colorscale + ? firstData.colorscale.map((arr: any) => arr[0] * (zMax - zMin) + zMin) + : []; + const rangeValuesForColorScale: string[] = firstData.colorscale ? firstData.colorscale.map((arr: any) => arr[1]) : []; return { data: [heatmapData], @@ -407,7 +410,8 @@ export const transformPlotlyJsonToSankeyProps = ( })) // eslint-disable-next-line @typescript-eslint/no-shadow //@ts-expect-error Dynamic link object. Ignore for now. - .filter(x => x.source !== x.target); // Filter out self-references (circular links) + // Filter out negative nodes, unequal nodes and self-references (circular links) + .filter(x => x.source > 0 && x.target > 0 && x.source !== x.target); const sankeyChartData = { nodes: node.label.map((label: string, index: number) => { diff --git a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx index 65d04ab60e1d23..846ce2c3764ac6 100644 --- a/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/charts/react-charting/src/components/LineChart/LineChart.base.tsx @@ -1192,7 +1192,7 @@ export class LineChartBase extends React.Component `translate(${this._xAxisScale(pointToHighlight.x)}, ${this._yAxisScale(pointToHighlight.y)})`, ) .attr('visibility', 'visibility') - .attr('y2', `${lineHeight - this._yAxisScale(pointToHighlight.y)}`); + .attr('y2', `${lineHeight - 5 - this._yAxisScale(pointToHighlight.y)}`); this.setState({ nearestCircleToHighlight: pointToHighlight, @@ -1278,7 +1278,7 @@ export class LineChartBase extends React.Component `translate(${_this._xAxisScale(x)}, ${_this._yAxisScale(y)})`) .attr('visibility', 'visibility') - .attr('y2', `${lineHeight - _this._yAxisScale(y)}`); + .attr('y2', `${lineHeight - 5 - _this._yAxisScale(y)}`); if (this._uniqueCallOutID !== circleId) { this._uniqueCallOutID = circleId; this.setState({