The design system at Tealium has grown over the years, however one area (among many) that was not flushed out were the components needed for charts and graphs. As with all aspects of design systems, the hardest part is creating and documenting all of the low level components necessary to realize the vast array of desired outcomes. While many UI boiler-plate components are encapsulated in systems like Ant and Material design systems, I took it on as a personal project to build out a chart and graph system that could be utilized by others.
I have now published the first version of Chart System Pro which is available on Gumroad for anyone to download. The system encompasses all grid-based charts and graphs including line charts, bar graphs, area charts, candlesticks, and others. Included are color sequences for all chart types which may be customized, a sample library of charts and graphs which may be quickly duplicated and edited as well as chart components including annotations, trendiness, plot pins, and reference bands. It truly became an invaluable tool as it is incredibly easy to generate the desired chart while maintaining the consistency inherent in a good design system.
Among the first activities in creating any design system is to plan out the design system structure and take inventory of the components that will be necessary to include. In this case, I applied the Atomic Design approach popularized by Brad Frost. Using this approach I mapped out atomic level components which are as basic as a line or rectangle. These atomic level components, while not necessarily useful on their own, are grouped into molecules which form the common component utilized in a chart or graph. For this project, the common use cases involved utilizing the molecules with slight variations. These variations were cataloged as templates which could be easily copied and pasted onto the charts.
To identify the components that would be necessary, I researched all types of charts and graphs and collected a vast library of charts and graphs published in news articles, research papers, financial reports, etc. I then parsed the catalogue and identified unique variations of elements such as legends, annotations, tic marks, etc. Then knowing the variations, I constructed the atomic and molecular components needed to recreate them. This allowed me to then create templates of each variation which could be easily copy and pasted into a chart, or easily swapped using the component switcher in Figma.
The overall system was fairly straight-forward to construct once the research and planning was complete. I first constructed the grid components to get a base-line for the size of the charts. I chose a 600 x 300 pixel grid as the base and built all other components around that size. The size was chosen as it closely reflected a wide variety of charts and graphs found while taking inventory. All other chart elements were sized off of that grid.
With grid templates in place, I built out the various plots points. In thinking through the use cases that are common for charts and graphs, I provided templates that covered basic simple use cases, scientific cases which are often multiples of 5, and date based use cases which include 7 days in a week, 30/31 days in a month, and 12 months in a year.
Lastly, I built out all basic chart components which will not only apply to grid-based charts, but also to a wide variety of chart types to be supported in the future such as pie charts, donut charts, spider charts, etc. I had particular fun detailing out the annotations as component structure is incredibly flexible and can be customized in some pretty wild ways.
Deserving of its own write-up, one often overlooked aspect of color systems is their ability to support charts and graphs. There are 12 color sequences that should be defined for a chart system and they require a full pallet of colors including hot, warm, neutral, cool, cold, and status colors. In order to generate the necessary color sequences, I created a unique color system specific for Chart System Pro. While these colors may be customized, they provide users with the necessary components from the start and can act as a reference for future customizations.
In generating the color sequences, I researched and utilized best practices advocated by IBM and others. Perhaps the most evident best practice utilized is ensuring high contrast levels for adjacent plot sequences.
At a high level, the types of sequences are as follows. Categorical sequences are utilized for graphs where there is no direct relationship between plot points such as car brands. Sequential color sequences convey a relative order to each plot point such as dates, and divergent color sequences convey a relative order, but between two opposing directions such as temperature. Overall, the 12 sequences include 16, 8, and 4 color variations and they are all defined and organized within Figma’s style selector making for over 336 defined color sequence styles.
While Figma is incredibly powerful, a lot of wish-list items came out of this project. One major limitation of Figma (at the time) is the inability to swap components or resize elements inside a component. For instance, when displaying a plot group, it would be great to be able to add or remove however many plot values are necessary for the graph. To work-around this restriction, I created a large number of values which would be made hidden when they are not needed.
Another big limitation is the ability to manipulate stacked bar charts and stacked area charts. The manipulation of these are extremely tedious as there is no object awareness between each plot sequence. So, for now, I chose not to include these chart types.
Other wish-list items include better tools for managing defined styles, the ability to set a custom anchor point, the ability to tab through vector points, display toggle off borders on specific sides of a shape, and set frames to fill available space.
With the grid-based charts and graphs well defined, I eventually plan to add additional chart types such as pie-charts, funnels, heat-maps, and spider charts, etc. I am incredibly proud of the quality and level of detail in Chart System Pro and hope other designers find it useful and time-saving. In the immediate future, I have a variety of marketing initiatives underway to broaden the awareness of Chart System Pro and promote its use.