Line chart

Explore our line chart examples to see how the VCC line chart component can be customized for specific business scenarios and analysis tasks.

Find design assets for these line chart examples in our Figma Data Experience Charts (internal only) library.

In this example, the chart is optimized to answer the key business questions, “How did performance change over time?” and “Is the gap between the two categories growing or shrinking?”. The following elements help emphasize the key takeaways:

• Color palette: Use colors from the categorical color palette to ensure both categories have equal visual emphasis and importance.
• Data labels: Show labels directly over each data marker to make it easier to interpret the exact value of each data point.
• Gridlines: Show horizontal gridlines to make it easier to compare differences across all data points.

In this example, the chart is optimized to answer the key business questions, “How did performance change over time?” and “How much difference is there between this year and last year’s performance?”. The following elements help emphasize the key takeaways:

• Color palette: Use bold and subtle colors to emphasize the change in values over time. This example uses a gray and blue highlight color palette to emphasize the current year’s trend line.
• Data labels: Show labels directly over each data marker on the current year’s line to make it easier to interpret the exact value of each data point, and help direct attention to the most recent data. This allows users to estimate the gap between current and previous year’s data points without overcrowding the chart.
• Stepped line style: Use a stepped line chart to emphasize the exact value of each data point and the change between consecutive data points. In this example, the stepped line style helps users easily interpret small changes, and make more precise comparisons between two line series.
• Y axis labels: Use axis labels to help users estimate the value of unlabeled data points.

In this example, the chart is optimized to answer the key business questions, “How did expenses change over time?” and “When did expenses exceed budget?”. The following elements help emphasize the key takeaways:

• Color palette: Use bold and subtle colors to emphasize which data points fall above or below the benchmark. This example uses the gray and red color palette to emphasize months where expenses exceeded the budget.
• Data labels: Show labels directly over each data marker to make it easier to interpret the exact value of each data point.
• Gridlines: Show horizontal gridlines make it easier to compare differences across all data points.
• Reference line: Provide a comparison to the target budget threshold to help users understand which values are good or bad.

In this example, the chart is optimized to answer the key business question, “Which countries are experiencing faster or slower pace of growth?”. The following elements help emphasize the key takeaways:

• Color palette: Use bold and subtle colors to emphasize overall trend patterns. In this example, the gray and blue highlight color palette emphasizes the worldwide trend line.
• Data abstraction: Using the first date period (Q1 FY21) as a baseline allows for easier comparisons of relative growth across countries with diverse economic sizes.
• Number formatting: Use symbols and formatting to clarify the meaning. In this example, including a plus sign (+) in the axis labels helps clearly communicate growth rates.