Comparison chart color not working

[TimoBaeuerle]

Bug summary

I added a line chart to my application that shows the user sessions for android and ios. Beside that it shows the previous period data in a comparison chart-line (isComparison = true). The problem is, that I have to add two comparisons (ios & android data), but the color attribute does not work on comparison chart-lines. (visible on screenshot)

Expected behavior

When I add a "color" attribute to the linechart group attributes is should colorize the chart-line exactly like the non-comparison chart-lines does.

Actual behavior

Currently it's just grey and not colorized in the preferred color:

The color attribute is set in the linechart.data like this:

const structuredData: LineChartGroup[] = [
  { name: 'iOS', color: "#5A39C6", data: iosData, isComparison: false },
  { name: 'Android', color: "#A4C639", data: androidData, isComparison: false },
  { name: 'Previous period (iOS)', color: "#5A39C6", data: [], isComparison: true },
  { name: 'Previous period (Android)', color: "#A4C639", data: [], isComparison: true }
];

Color works for the chart-lines that are set to isComparison = false, but not to the comparison chart-lines. This is a inconsistent behaviour and in my frontend, users can not differ between the two comparison chart-lines without hovering over the values.

Steps to reproduce the problem

1. Create a line chart
2. Add two or more comparison linechart groups
3. Add a color attribute to the linechart groups
4. Check out the color in your running application

Specifications

• Polaris-Viz version number: "^10.3.2"

[envex]

We currently override the color value for series that have isComparison: true. Ideally, a data set would only have a single comparison value.

[TimoBaeuerle]

Our line graph has two values (Android, iOS). This leads to multiple comparison values. How does polaris-viz deal with this? Overwriting the color value is already described in the bug report, but does not answer why it is overridden when a specific colour value is given. In my opinion the color value should have a consistent behaviour.

[envex]

We wanted to keep the comparison styling (dotted line & color) consistent which is why we don't allow the styling or color to be overridden.

If you want to show multiple comparison lines, you can remove isComparison: true from your data series and use styleOverride to change the strokeDasharray.

styleOverride: {
  line: {
    strokeDasharray: '0.1 4',
  },
},

The above strokeDasharray will get you the same dotted styling we apply for isComparison.

[TimoBaeuerle]

That should work for me, thanks!