VectorPaint bar chart: keep lengths, numbers and units consistent

English translation of the Chinese original, translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

VectorPaint can make simple data charts from rectangles and text, but you calculate values and lengths yourself. Practice with fictional reading durations: Group A twenty minutes, Group B thirty-five, and Group C fifty. The aim is faithful representation, not making one bar appear more prominent.

Organize data and units first

Write the three names, values, and unit in one draft. Explicitly mark them as practice data. Replace them with verifiable information for real publication and state scope and date. Do not initially compare different units on one length scale; minutes and page counts cannot share the same bar comparison directly.

Create a landscape 900×600 px canvas, reserving title space above, names on the left, bars centrally, and values on the right. Allow for the longest name before setting chart width so you do not quietly shorten one bar to fit text later.

Calculate all three lengths with one scale

At eight canvas units per minute, twenty, thirty-five, and fifty minutes become one hundred sixty, two hundred eighty, and four hundred. Record these target widths. The scale can change, but every bar must use the same scale.

Start the first bar at the shared origin, one hundred sixty wide and forty-eight high. Duplicate it, change the other widths to two hundred eighty and four hundred, and keep equal heights. In object geometry, choose the left reference, disable Keep Aspect Ratio, change only width, and select Apply Position and Size. Check that left edges stay fixed and heights equal. If you scaled proportionally by mistake, undo and set it again.

Start every bar at the zero baseline

Align the rectangles' left edges on one vertical baseline representing zero. Before alignment, confirm that only the three bars are selected, excluding text and background. After left alignment, arrange vertical spacing.

Truncating a bar chart's starting length can exaggerate differences. Retain zero and add a few scale marks below: zero, twenty-five, and fifty minutes suffice. Keep guides lighter than bars so they do not dominate.

Place labels consistently

Create separate Group A, Group B, and Group C text labels on the left, vertically centered on their bars. Put values just beyond the right ends with equal gaps. Use units consistently rather than mixing minute labels with bare numbers.

Use one clear font and equal number sizes. Enlarging the value on the longest bar adds emphasis beyond its length. For long names, wrap them or enlarge the label area and adjust the whole layout rather than shrinking one label alone.

Use color for grouping without changing proportions

Start with one green for all bars so readers focus on length. To emphasize one group, use a darker shade while preserving height, origin, and numerical rules. Color supplements names and values; it cannot replace them.

Keep the background simple and omit unnecessary gradients and three-dimensional shadows. Such effects change perception of bar endpoints and can make area disagree with length. Flat rectangles are easier to check for this comparison task and easier to update later.

Update changed data using the same formula

If Group B changes from thirty-five to forty minutes, its new width is three hundred twenty. Update the draft, rectangle width, and text label, then check whether sorting should change. All three must agree or the shapes and numbers contradict each other.

If the maximum exceeds the original range, choose a new scale for the whole chart and recalculate every bar. Do not merely compress the longest to fit. Keep a data-to-dimensions record so someone else can understand the calculation without reverse-engineering the shapes.

Make two rounds of checks after export

First check names, values, units, and source notes individually. Then compare length ratios: fifty minutes should be two and a half times twenty, and the longest and shortest bars should roughly match that relationship. Simple ratios catch extra or missing digits in width entry.

Read the exported PNG at its intended width to confirm small text remains legible. For document delivery, export PDF and retain the editable original. In real publication, state data source and counting criteria below the chart. Label this example as fictional practice data so it is not mistaken for survey results.

Frequently asked questions

Can I represent the values with circle areas instead? Other shapes are possible, but area and length use different calculations. The same width values cannot be treated directly as area ratios. Equal-height rectangles make length comparisons accurate in this exercise.

What if the values are too similar to look distinct? Keep accurate proportions, label exact values, and explain differences in words where needed. Do not arbitrarily truncate the zero baseline or enlarge one bar for impact. Charts support understanding; clear labels are usually more useful than exaggerated shapes.

Recalculate once when replacing a value

After all three bars are complete, temporarily change Group A to twenty-five minutes. At eight units per minute, its width becomes two hundred. Change the rectangle and check that its left baseline and height remain fixed, then update the label. Restore the original data or save a separate practice copy. This tests synchronized content and geometry changes, avoiding real updates where only text changes and bar length is forgotten.