Allow the user to assign colours and styles (e.g. dashed line) to series

[charlesons]

For chart types where data is represented as distinct series the user may wish to specify colour and other stylistic properties of the series.

This issue covers series styling for line and bar charts.

The existing code allows the user to specify a subset of data series to display from the available series on the selected dimension. The user can also set a currently series label.

Some considerations for the implementation:

• Line and bar series can have a colour
• Line series (but not bar series) can have a line style
• The selection of series formatting 'fits' with the existing user flow of assigning series labels.
• Apply sensible defaults

Some related issues are:

72 Allow the user to specify the data series order

51 Visual axis data and label assignment

Definition of Done

• [ ] Sensible defaults for series formatting are provided automatically
• [ ] User is able to specify a series colour from chart builder's curated colour palette
• [ ] User is able to specify a series line style for line chart series

Acceptance criteria

• [ ] Line charts render with the specified line colour and style
• [ ] Bar charts render with the specified bar colour

[ajtucker]

Allow user to override default colour / style for a given series.

[charlesons]

Reviewed and refactored DataSelection and DimensionSelection components which deal respectively with assigning data columns to axes and defining the series to display.

Within DimensionSelection we currently set the series label. We need to expand this to allow the user to assign multiple properties to the series.

Proposed implementation consists of:

• a list of series whose properties can be set
• user can select one series at a time
• a properties window under the series list where the user can set series colour and style
• properties will show contextually according to the selected chart type

UX considerations The proposed series styling features form an additional step in the user's process of defining the data to display on the chart. As such this may be a good opportunity to break the data definition process into a stepwise process.

[charlesons]

To create a selectable list of colours for the user to specify series colours we initially looked at the HTML Select component but this has limitations on the extent of styling that can be applied to the list options.

https://stackoverflow.com/questions/62779788/set-background-color-of-option-in-select

https://stackoverflow.com/questions/46596240/svg-inside-option-element

We conclude that a custom select component would better meet our need to present richly styled options to the user (e.g. colours, lines, shading, etc).