SVG test

Author: dlabrecq

packages/react-charts/src/next/components/Sankey/Sankey.tsx

@@ -64,7 +64,9 @@ export const Sankey: React.FunctionComponent<SankeyProps> = ({
     color: 'source',
     opacity: 0.6
   },
-  opts,
+  opts = {
+    renderer: 'svg'
+  },
   series,
   sourceLabel = 'Source',
   theme = chartTheme,

packages/react-charts/src/next/components/Sankey/theme.ts

@@ -28,31 +28,31 @@ import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-t
 // The color order below improves the color contrast in unordered charts; area & line
 // See https://github.com/patternfly/patternfly-next/issues/1551
 const COLOR_SCALE = [
-  chart_theme_multi_color_ordered_ColorScale_100.value,
-  chart_theme_multi_color_ordered_ColorScale_200.value,
-  chart_theme_multi_color_ordered_ColorScale_300.value,
-  chart_theme_multi_color_ordered_ColorScale_400.value,
-  chart_theme_multi_color_ordered_ColorScale_500.value,
-  chart_theme_multi_color_ordered_ColorScale_600.value,
-  chart_theme_multi_color_ordered_ColorScale_700.value,
-  chart_theme_multi_color_ordered_ColorScale_800.value,
-  chart_theme_multi_color_ordered_ColorScale_900.value,
-  chart_theme_multi_color_ordered_ColorScale_1000.value,
-  chart_theme_multi_color_ordered_ColorScale_1100.value,
-  chart_theme_multi_color_ordered_ColorScale_1200.value,
-  chart_theme_multi_color_ordered_ColorScale_1300.value,
-  chart_theme_multi_color_ordered_ColorScale_1400.value,
-  chart_theme_multi_color_ordered_ColorScale_1500.value,
-  chart_theme_multi_color_ordered_ColorScale_1600.value,
-  chart_theme_multi_color_ordered_ColorScale_1700.value,
-  chart_theme_multi_color_ordered_ColorScale_1800.value,
-  chart_theme_multi_color_ordered_ColorScale_1900.value,
-  chart_theme_multi_color_ordered_ColorScale_2000.value,
-  chart_theme_multi_color_ordered_ColorScale_2100.value,
-  chart_theme_multi_color_ordered_ColorScale_2200.value,
-  chart_theme_multi_color_ordered_ColorScale_2300.value,
-  chart_theme_multi_color_ordered_ColorScale_2400.value,
-  chart_theme_multi_color_ordered_ColorScale_2500.value
+  chart_theme_multi_color_ordered_ColorScale_100.var,
+  chart_theme_multi_color_ordered_ColorScale_200.var,
+  chart_theme_multi_color_ordered_ColorScale_300.var,
+  chart_theme_multi_color_ordered_ColorScale_400.var,
+  chart_theme_multi_color_ordered_ColorScale_500.var,
+  chart_theme_multi_color_ordered_ColorScale_600.var,
+  chart_theme_multi_color_ordered_ColorScale_700.var,
+  chart_theme_multi_color_ordered_ColorScale_800.var,
+  chart_theme_multi_color_ordered_ColorScale_900.var,
+  chart_theme_multi_color_ordered_ColorScale_1000.var,
+  chart_theme_multi_color_ordered_ColorScale_1100.var,
+  chart_theme_multi_color_ordered_ColorScale_1200.var,
+  chart_theme_multi_color_ordered_ColorScale_1300.var,
+  chart_theme_multi_color_ordered_ColorScale_1400.var,
+  chart_theme_multi_color_ordered_ColorScale_1500.var,
+  chart_theme_multi_color_ordered_ColorScale_1600.var,
+  chart_theme_multi_color_ordered_ColorScale_1700.var,
+  chart_theme_multi_color_ordered_ColorScale_1800.var,
+  chart_theme_multi_color_ordered_ColorScale_1900.var,
+  chart_theme_multi_color_ordered_ColorScale_2000.var,
+  chart_theme_multi_color_ordered_ColorScale_2100.var,
+  chart_theme_multi_color_ordered_ColorScale_2200.var,
+  chart_theme_multi_color_ordered_ColorScale_2300.var,
+  chart_theme_multi_color_ordered_ColorScale_2400.var,
+  chart_theme_multi_color_ordered_ColorScale_2500.var
 ];
 
 export const theme = {
@@ -233,7 +233,7 @@ export const theme = {
       }
     }
   },
-  valueAxis: {
+  varAxis: {
     axisLine: {
       show: false,
       lineStyle: {