feat: Support dashed line in declarative chart

microsoft · Jan 20, 2025 · 569afa2 · 569afa2
1 parent 379df8e
commit 569afa2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -29,7 +29,7 @@ import { DataVizPalette, getNextColor } from '../../utilities/colors';
 import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
 import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
-import { Layout, PlotlySchema, PieData, PlotData, SankeyData } from './PlotlySchema';
+import { Layout, PlotlySchema, PieData, PlotData, SankeyData, Dash } from './PlotlySchema';
 import type { Datum, TypedArray } from './PlotlySchema';
 
 interface ISecondaryYAxisValues {
@@ -281,6 +281,9 @@ export const transformPlotlyJsonToVSBCProps = (
         const color = getColor(legend, colorMap, isDarkTheme);
         mapXToDataPoints[x].lineData!.push({
           legend,
+          lineOptions: ['dot', 'dash', 'longdash', 'dashdot', 'longdashdot'].includes(series.line?.dash as Dash)
+            ? { strokeDasharray: '5', strokeLinecap: 'butt', strokeWidth: '2', lineBorderWidth: '4' }
+            : {},
           y: yVal,
           color,
         });
@@ -470,6 +473,9 @@ export const transformPlotlyJsonToScatterChartProps = (
 
     return {
       legend,
+      lineOptions: ['dot', 'dash', 'longdash', 'dashdot', 'longdashdot'].includes(series.line?.dash as Dash)
+        ? { strokeDasharray: '5', strokeLinecap: 'butt', strokeWidth: '2', lineBorderWidth: '4' }
+        : {},
       data: xValues.map((x, i: number) => ({
         x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
         y: series.y[i],

diff --git a/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/...ts/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -443,6 +443,7 @@ export class VerticalStackedBarChartBase
             opacity={shouldHighlight ? 1 : 0.1}
             strokeWidth={3}
             strokeLinecap="round"
+            strokeDasharray={this._points[i].lineData?.[0]?.lineOptions?.strokeDasharray}
             stroke={lineObject[item][i].color}
             transform={`translate(${xScaleBandwidthTranslate}, 0)`}
             {...(this._isLegendHighlighted(item) && {

diff --git a/packages/charts/react-charting/src/types/IDataPoint.ts b/packages/charts/react-charting/src/types/IDataPoint.ts
@@ -650,6 +650,10 @@ export interface ILineDataInVerticalStackedBarChart {
    * False by default.
    */
   useSecondaryYScale?: boolean;
+  /**
+   * options for the line drawn
+   */
+  lineOptions?: ILineChartLineOptions;
 }
 
 /**