Create Charts and Dashboards That Do Not Mislead

Make the visual answer match the numbers, the denominator, and the question.

A bar chart shows one month towering over another. The values are 100 and 104. The vertical axis begins at 99, making a four-unit difference look enormous.

Elsewhere, a dashboard shows a smooth line through a week with no data. A conversion-rate card averages percentages from groups of different sizes. Both displays look professional. Both can lead the reader to the wrong conclusion.

AI can help select chart forms, write plotting code, and assemble a dashboard. A useful visual still needs a clear question, an honest scale, a defined denominator, and a way to verify what the display says.

Decide what the reader needs to see

Comparison, trend, distribution, composition, and location are different visual tasks. A ranked bar chart can help compare category magnitudes. A line can show ordered changes over time. A distribution plot can reveal spread that a single average hides.

Choose the visual after defining the question. “Make a dashboard” is not enough. Ask whether the reader needs to identify an exception, compare a target, or understand how performance differs across groups.

Sometimes a small table is the clearest display. If the user needs exact values for four records, a decorative chart may add little. Use a visualization when its structure makes a relationship easier to see.

A dashboard should support a small set of connected decisions. More cards can make it harder to identify which result actually matters.

Repair a misleading scale

Return to the values 100 and 104. Their absolute difference is four, and the relative increase from 100 is 4%.

For ordinary bars that encode magnitude through length, use a zero baseline so the lengths remain proportional to the values. If a focused view of a small difference is needed, a clearly labeled point or line display with an appropriate nonzero range may serve that purpose. Explain the range and report the actual values.

The goal is not a rule that every axis on every chart must start at zero. It is a match between the visual encoding and the claim the reader is likely to infer.

Avoid three-dimensional decoration that changes perceived area or hides values. If uncertainty matters, use an appropriate uncertainty display and explain what it represents. Do not add error bars merely to make a chart look scientific.

Preserve missing periods

Our fictional dashboard packet contains four consecutive reporting weeks for a booking process. An eligible session is defined by the source system, and the numerator counts sessions with at least one completed booking, at most once per session. All available weeks have complete numerator and denominator records under that definition.

Week 3 is a missing export. It is not a week with zero sessions, zero bookings, or zero conversion.

A line chart should make the gap visible instead of implying an observed uninterrupted path. A table should show “not available” with a reason. An aggregate card should state that it covers only the three available weeks.

If the interface offers an estimate for the missing week, label it as an estimate with a documented method and keep it separate from observed values. This teaching packet contains no such estimate.

Calculate the combined rate from counts

Across the three available weeks, eligible sessions total 300 and booking sessions total 34. The combined conversion rate is:

34 ÷ 300 × 100 = approximately 11.33%.

A simple average of 10%, 10%, and 15% is approximately 11.67%. That gives equal weight to weeks with different session counts, so it answers a different question: the unweighted average of observed weekly rates.

The dashboard’s intended aggregate is conversion among all observed eligible sessions. Use 11.33% and display the 34/300 denominator.

Week 4’s 15% rate is higher than the earlier observed rates, while its twelve booking sessions equal Week 2’s count. Rate and volume offer different information. A card saying “bookings surged” would need the count comparison and a defined period, not just the rate.

Build a small dashboard specification

The following is a complete numerical dashboard view for the teaching packet. It is presented as tables and text, not a deployed interactive application.

The weekly table above supplies the trend detail. An accompanying description reads: “Observed conversion was 10% in Weeks 1 and 2 and 15% in Week 4. Week 3 is unavailable. Across observed sessions, 34 of 300 had a booking.”

This description gives a reader the essential relationship without requiring color perception or interaction. It also exposes the denominator and missing period directly.

For an actual dashboard, add the real source-update time, extraction time, and refresh status. A placeholder date in a design mockup should never be presented as proof that live data has refreshed.

Make filters part of the calculation

A filter can change the numerator, denominator, or both. Specify what should happen and test it.

If the user selects Week 4, the dashboard should show 12 booking sessions, 80 eligible sessions, and 15%. If it shows 12 divided by the unfiltered 300 sessions, the result becomes 4%, which does not represent Week 4 conversion.

If the user selects only Week 3, the display should show unavailable data, not 0%. If the filter selects an observed group with zero eligible sessions, the rate is undefined; that is different from a group with eligible sessions and no bookings.

Record which filters apply to each card. A page where some cards are filtered and others remain global can be useful, but the distinction must be apparent to the reader.

Check exported tables and screenshots as well as the interactive view. Context can disappear when a chart is copied without its filter or coverage note.

Design access into the result

Use labels, shapes, or text as well as color to distinguish important categories. Ensure the text remains readable at the intended size and that controls have understandable names.

For complex charts, provide a short identifying description and a longer explanation or data table conveying the essential information. W3C’s guidance discusses these text alternatives and how to associate them with complex images. See W3C WAI’s complex images tutorial.

For interactive dashboards, keyboard access and focus behavior need actual interface checks. Writing “accessible” in the specification does not establish that the implementation works with the relevant interaction methods.

A useful review asks someone to answer the visual question from the text alternative alone. If they cannot recover the main result, the alternative may omit essential information.

Add context only when it has a source

Targets, benchmarks, and comparison groups can help interpretation. They can also mislead when their basis is unclear.

If you add a target line, identify who set the target, what it means, and whether it applies to the selected population and period. A model-generated “industry average” should remain unverified until you locate an appropriate source.

Avoid implying statistical certainty from a short run of points. The teaching packet’s higher Week 4 rate is an observation. Whether it reflects a durable change or random variation requires a suitable analysis and more context.

Likewise, a red status badge is a decision rule, not a natural property of a number. Define the rule and its owner. If an alert uses a changing denominator, test that the status logic still reflects the intended decision.

Validate the delivered view

Check a small set of values directly against the source: a total, a filtered rate, a missing-data state, and an exported view. Inspect scales, ordering, units, and time labels.

For the teaching packet, the key checks are 300 sessions, 34 booking sessions, 11.33% overall, and 15% for Week 4. Confirm that Week 3 remains missing in every view.

If a chart’s apparent conclusion conflicts with its table, investigate the encoding and calculations. The correct number hidden in a tooltip does not excuse a misleading main display.

Keep the dashboard definition and data version together. A reader should be able to identify what the page displayed at the time a decision was made.

A reusable prompt

Choose visual forms for these questions and data definitions. Explain the encoding, scale, denominator, missing-period handling, uncertainty, and accessibility requirements before plotting. Reconcile every displayed metric to source counts. Specify filter behavior, data freshness, and export context. Do not invent benchmarks, interpolate missing observations without labeling an estimate, or average rates with unequal denominators when the intended metric is an aggregate rate.

For students: repair the story a chart tells

Create three flawed chart specifications: a truncated magnitude bar, a line that hides a missing week, and a conversion card that uses the wrong denominator. Explain the incorrect inference each could encourage.

Then repair the specifications and write a text alternative for each. Art and design students can focus on visual encoding. Mathematics students can verify the rates. Computing students can implement and test filter behavior.

A successful chart assignment should assess whether another person understands the data correctly, not just whether the chart looks polished.

Practice: build the four-week view

Use the supplied packet to create the dashboard as a spreadsheet view, a static report, or an instructor-approved interactive page. Preserve Week 3 as unavailable. Provide the weekly table and the aggregate calculation.

Test selection of Week 4, selection of Week 3 alone, and selection of all available weeks. Record the expected counts and rates before checking the display.

Completion check: The overall observed rate is 34/300, approximately 11.33%; Week 4 is 12/80, or 15%; Week 3 remains unavailable; filter denominators match the selected population; and a text alternative conveys the main result and missing coverage.

Stretch: Add a second category to the synthetic data and test whether category filtering unexpectedly leaves a global denominator in one card. Document the defect and the corrected metric definition.