Line Chart Animation by Jeremy Basham
Line chart is created by connecting a series of data points together with a line. This type of chart is good at showing change over time, comparisons, and trends.
This article explains the basics of using line charts in UI design. 
Data
Number of lines
Don’t choose a line chart for data sets with more than four values. By adding more values, you will make the chart look busy and make it harder for users to extract important insights using it.
Use a line chart to represent data with four or fewer related values. Image by Salesforce.
Scale
Always compare values on a consistent scale
Compare values using similar units, on a consistent scale. Image by Salesforce.
Color
Color plays an integral part in narrating stories through data visualization.
Chart background
Opt for a neutral background color to make the lines stand out.
Lines
Use a minimal color palette when associating colors with numbers. The colors should be distinct for different lines to help users differentiate them. Design lines with at least 2pts in weight and with a sufficient contrast against the background.
Use shapes along with color to communicate information
Avoid using just color to communicate meaning in your data visualization. Add other visual indicators such as shapes, line texture, patterns, or direct labels to support users in making sense of the data
Using shapes along with colored lines to communicate information. Using shapes in addition to color will add another layer of differentiation so that charts do not rely solely on color to communicate meaning. Image by Twilio
Accessibility
Chart colors meet WCAG AA 3:1 contrast ratio.
Labels
Ensure there is enough room for labels
When adding labels, provide enough room, so the labels don’t overlap.
Labels shouldn’t overlap each other. Image by Uber.
Interaction design
Hover/Active states
Highlight data points or lines on hover to provide more detailed information. Implement tooltips that show detailed information when a user hovers over a data point.
Tooltip on mouse hover for a Wed 06 datapoint.
You can also allow users to hover over/click on a legend item to highlight a particular line.
When a user hovers over a legend label, opacity lowers for all other legend labels. Image by RedHat.
How to design Line chart in Figma
https://medium.com/media/b8930d1dd800a0f02b42c2c60a993c11/href
Want to learn UX design?
Try Uxcel. Uxcel will help you learn and improve your design skills with interactive UX courses and skill tests built specifically for professional designers.
Learn UX Design at Your Own Pace | Interactive Courses | Uxcel
This post contains affiliate link(s)
Line Chart UI Design Tips & Tricks was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
