diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index 181f88c9b5a60a..089fc1ea412197 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -160,6 +160,8 @@ export const transformPlotlyJsonToVSBCProps = ( const { data, layout } = jsonObj; const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; let yMaxValue = 0; + let secondaryYAxistitle: string = ''; + let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {}; data.forEach((series: any, index1: number) => { series.x?.forEach((x: string | number, index2: number) => { @@ -185,6 +187,23 @@ export const transformPlotlyJsonToVSBCProps = ( yMaxValue = Math.max(yMaxValue, series.y?.[index2]); }); + if (layout.yaxis2 && series.name === layout.yaxis2.title) { + secondaryYAxistitle = layout.yaxis2.title; + if (layout.yaxis2.range) { + secondaryYScaleOptions = { + yMinValue: layout.yaxis2.range[0], + yMaxValue: layout.yaxis2.range[1], + }; + } else { + const yValues = series.y; + if (yValues) { + secondaryYScaleOptions = { + yMinValue: Math.min(...yValues), + yMaxValue: Math.max(...yValues), + }; + } + } + } }); const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout); @@ -198,6 +217,8 @@ export const transformPlotlyJsonToVSBCProps = ( chartTitle, xAxisTitle, yAxisTitle, + secondaryYAxistitle, + secondaryYScaleOptions, }; }; @@ -208,6 +229,8 @@ export const transformPlotlyJsonToGVBCProps = ( ): IGroupedVerticalBarChartProps => { const { data, layout } = jsonObj; const mapXToDataPoints: Record = {}; + let secondaryYAxistitle: string = ''; + let secondaryYScaleOptions: { yMinValue?: number; yMaxValue?: number } = {}; data.forEach((series: any, index1: number) => { series.x?.forEach((x: string | number, index2: number) => { @@ -227,6 +250,23 @@ export const transformPlotlyJsonToGVBCProps = ( }); } }); + if (layout.yaxis2 && series.name === layout.yaxis2.title) { + secondaryYAxistitle = layout.yaxis2.title; + if (layout.yaxis2.range) { + secondaryYScaleOptions = { + yMinValue: layout.yaxis2.range[0], + yMaxValue: layout.yaxis2.range[1], + }; + } else { + const yValues = series.y; + if (yValues) { + secondaryYScaleOptions = { + yMinValue: Math.min(...yValues), + yMaxValue: Math.max(...yValues), + }; + } + } + } }); const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(layout); @@ -239,6 +279,8 @@ export const transformPlotlyJsonToGVBCProps = ( chartTitle, xAxisTitle, yAxisTitle, + secondaryYAxistitle, + secondaryYScaleOptions, }; };