Bar chart

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

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

In this example, the chart is optimized to answer the key business question, “How did performance change over time?”. The following elements help emphasize the key takeaways:

• Color palette: Use one color for every bar to emphasize the overall shape of the trend without overwhelming users. This example uses the neutral blue from our single color palette.
• Data labels: Show labels directly over each bar to make it easier to interpret the exact value of each data point.
• Gridlines: Use horizontal gridlines to make it easier to compare heights between non-adjacent bars.

In this example, the chart is optimized to answer the key business question, “How did performance change over time?”. The following elements help emphasize the key takeaways:

• Color palette: Use sequential colors with a legend to categorize bars according to their values and make it easier to spot the high and low values. This example uses the secondary blue sequential color palette.
• Data labels: Show lables directly over each bar to make it easier to interpret the exact value of each data point.
• Gridlines: Use horizontal gridlines to make it easier to compare heights between non-adjacent bars.

In this example, the chart is optimized to answer the key business question, “How did performance change over time?” and “When did our performance beat the market average?”. The following elements help emphasize the key takeaways:

• Color palette: Use a combination of bold and subtle colors to emphasize which bars fall above or below the benchmark. This example uses the gray and blue highlight palette.
• Data labels: Show lables at the bottom of each bar to make it easier to interpret the exact value of each data point without overcrowding the benchmark line.
• Reference line: Use the reference line to help users understand which values are good, bad, or typical.

In this example, the chart is optimized to answer the key business question, “Which countries performed better?”, and “What are the similarities and differences between regions?”. The following elements help emphasize the key takeaways:

• Color palette: Use the categorical palette to group bars into relevant groups. In this example, this helps indicate which regions had countries that ranked towards the top or the bottom and compare countries within a region.
• Data labels: Show lables directly over each bar to make it easier to interpret the exact value of each data point.
• Reference line: Use the reference line to provide a reference point between each country and the average value.
• Order: Order countries from highest to lowest to make it easy to identify the ranking of countries at a quick glance.

In this example, the chart is optimized to answer the key business question, “What is the range of values of low to high spenders?” and “What are the most common values, and how do they compare to the average?”. The following elements help emphasize the key takeaways:

• Color palette: Use sequential colors to emphasize the value of bars, typically with darker bars indicating larger values. This example uses the purple sequential color palette.
• Annotations: Include annotations to provide a summary of the important data points and in-context instructions to help users interpret the chart.
• Center baseline axis: Use a centered baseline on the Y axis to keep the focus on the overall shape of the distribution.