Dumbbell plot

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

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

In this example, the chart is optimized to answer the key business questions: “When did our customer growth outpace competitors?”, “How much difference is there between our rate of customer growth and competitors?”, and “How did customer growth change over time?”. The following elements help emphasize the key takeaways:

• Color palette: Use two colors to indicate the series membership of each dot. This example uses the gray and blue highlight color palette to emphasize months where the selected client’s performance was better than the competitor benchmark, where the bar is colored based on which series has the highest value.
• Data labels: Label important data points to help users interpret the data in the chart without overcrowding the display. In this example, labeling the minimum point, maximum point, and most recent data gives the overall range of the data.
• Gridlines: Use vertical gridlines to help users understand which month each dumbbell corresponds to.

In this example, the chart is optimized to answer the key business questions: “Did this year’s performance beat last year’s and by how much?” and “Is that difference growing or shrinking?”. The following elements help emphasize the key takeaways:

• Color palette: Use two colors to highlight important data on the chart. In this example, the gray and blue highlight color palette emphasizes the direction of the change from last year.
• Data labels: Label important data points to help users interpret the data in the chart without overcrowding the display. In this example, labeling the minimum point, maximum point, and most recent data gives the overall range of the data.
• Gridlines: Use vertical gridlines to help users understand which month each dumbbell corresponds to.
• Marker type: Use the arrow marker type to emphasize the direction of change, making it easier to quickly understand if this year’s performance was an increase or decrease from last year.

In this example, the chart is optimized to answer the key business question: “Which cities performed above or below average?”. The following elements help emphasize the key takeaways:

• Color palette: Use two colors to highlight important data on the chart. In this example, the gray and red highlight color palette emphasizes cities that performed below average.
• Data labels: Directly label each point to make it easier to interpret the exact value. This example provides additional labels with the difference from the benchmark for quicker analysis.
• Reference line: Include a reference line to indicate the benchmark for comparing which values are good or bad. In this example, it shows the the overall U.S. average.
• Axis annotation: Use annotations to give contextual explanations of the data. In this example, the annotation labels and arrows at the top of the chart explain how to interpret values along the horizontal axis, as well as how to interpret the red and gray colors.