Create & share DataChart MVP to library

[SeamusLeonardHPE]

Overview

There are currently gaps between design patterns available in grommet, and those inside the design system library. Data visualisation is such a case and we aim to build, test & socialise figma designs to bridge the gap.

https://v2.grommet.io/datachart

Steps

• Gather use cases from external teams that have created their own chart visualisation.
• Iterate on datachart

Deliverables

• [x] Create figma examples of Axis Chart for small/medium/large & full(responsive) tshirt sizes that can be copied by product designers
• [x] Create figma examples of Detail for small/medium/large & full(responsive) tshirt sizes that can be copied by product designers
• [x] Create figma examples of Stackedbars Chart for small/medium/large & full(responsive) tshirt sizes that can be copied by product designers
• [x] Legend - create figma examples of the legend as seen on charts

Considerations

• Base designs of previous meter bar chart designs
• X axis label & grid lines (separate group to bar for visibility toggle)
• Y axis label & grid lines (separate group to bar for visibility toggle)
• Use of legend data sets
• Employ t-shirt sizing
• DS data viz color guidance

Design discovery on figma at following link for visibility 👀

https://www.figma.com/file/CD8dd44QACAs5TmHB9trp8/Template-Library---Construction?type=design&node-id=1392-5263&mode=design&t=VgoRvAtmLLPk7HeL-4

[ashifalinadaf]

As a next step after the creation of the feasible components Working on the usage guidance and anatomy to publish it on template library.

[julauxen]

The details on this issue will be considered under #3592