Basic Bar Chart
Compare categories by value with one dimension and one measure. The fastest chart to build in Visualize.
Drop one categorical or date field into Column and one numeric field into Row. Set an aggregation. The chart builds. That is the entire setup for a working basic bar chart - one dimension, one measure, bar height encodes the value for each category.
When to Use
The bar chart works when the question is: which categories are higher or lower than others? Revenue by region. Support tickets by team. Orders by product line. Any time you are comparing a single measure across a set of named categories, this is the right starting point.
Keep categories under 15 to 20. Past that, bars become narrow columns that are nearly impossible to compare by eye and category labels start colliding on the X-axis. If you are plotting 50 sales reps or 200 SKUs, the chart does not become harder to read - it becomes useless. Pre-filter to the top 10 or 15 in Transform, or switch to a table where every row is readable.
Switch to a different chart when:
- You need to compare two or more measures per category - use Side by Side Bar
- You need to show how a total breaks into parts - use Stacked Bar
- Your dimension is time and trend continuity matters - use Line Chart
- You have more than 20 categories and scrolling is not acceptable - use a table
| Scenario | Dimension | Measure |
|---|---|---|
| Revenue by region | Region | Sum of revenue |
| Support tickets by team | Team name | Count of tickets |
| Average order value by product category | Product category | Average of order value |
| Monthly active users by plan tier | Plan tier | Count Distinct of user ID |
| Headcount by department | Department | Count of employees |
Required Inputs
| Field | Type | Count |
|---|---|---|
| Dimension | Categorical or Date | Exactly 1 |
| Measure | Numeric | Exactly 1 |
For step-by-step build instructions, see Build Your First Chart.
Formatting Options
The Format tab unlocks after at least one field is assigned. Once your chart is rendering, use these controls to define how it looks and how viewers interact with it.
Style
The title sits above the chart and defaults to the name you gave the visualization at save time. It is the first thing a dashboard viewer reads - make it answer the question the chart is built around, not just describe the data. "Revenue by Region - Q2 2024" is more useful than "Revenue".
| Control | What it does |
|---|---|
| Show Chart Title | Shows or hides the title. The text is preserved when hidden so you can toggle it back without re-entering. |
| Enter Chart Title | Title text. Maximum 50 characters. |
| Font family | Font applied to the title. |
| Font size | 5 to 30. |
| Bold / Italic | Weight and style. |
| Alignment | Left, center, or right within the chart container. |
Defaults to transparent, inheriting the dashboard canvas color. Set an explicit color when the chart needs a distinct surface inside a card layout, or when exporting as a standalone image and a white background is required.
| Control | What it does |
|---|---|
| Background Color | Fill color of the chart container. |
Controls how the bars look, not what they mean. Keep the defaults unless you have a specific reason to change them - a well-labeled chart with default styling reads faster than one with heavy visual customization.
| Control | What it does |
|---|---|
| Bar Color | Fill color applied to all bars. One color across all bars. If you need bars colored differently per value, use Highlighted Table instead. |
| Bar Gap | Space between bars, 0 to 5. Increase when bars are wide and the chart feels dense. Reduce when you have many categories and need bars to fill the available space. Do not set to 0 unless the category count is very low - bars that touch each other are harder to compare than bars with a gap. |
| Background Color | A secondary color filling the full axis height behind each bar, like a track. Use this to show remaining capacity against a fixed target - actual revenue bars against a target background. Leave it off if there is no reference value. |
| Border Color | Color of the bar border. |
| Border Width | Thickness of the bar border, 0 to 3. At 0 there is no border. At 3 on narrow bars, the border can consume more visual space than the bar fill - test at your actual category count before finalizing. |
| Corner Radius (top-left, bottom-left, top-right, bottom-right) | Rounds bar corners independently, 0 to 10 each. Rounded tops (4 to 6) suit card-style dashboard layouts. Do not push all corners to 10 on charts with more than 10 categories - narrow bars become pill shapes and the height encoding breaks down. |
Data labels print the exact value on or above each bar. Useful when viewers need specific numbers rather than relative comparison - finance dashboards, executive summaries, exports. For general comparison use, leave them off. On charts with many categories, data labels overlap each other before the bars do.
| Control | What it does |
|---|---|
| Show Data Labels | Shows or hides value labels on each bar. |
| Font family | Font applied to data labels. |
| Font size | Maximum 18. Keep this small on dense charts - a 14pt label on a narrow bar covers the bar entirely. |
| Bold / Italic / Color | Text styling. |
| Position | Where the label sits on the bar: Top (above), Middle (centered), or Bottom (at the base). Top is the most readable. Middle works when bars are tall enough for the label to fit inside. Bottom is rarely useful on a standard vertical bar chart. |
| Number Type | Default (raw value), Scientific, Decimal, or Percentage. Use Percentage when the measure is already a rate. |
| Display Unit | None, Thousand, Million, or Billion. Match this to the Y-axis Display Unit - if the axis shows "4.3M" and data labels show "4,300,000" the chart looks inconsistent. |
| Decimal Places | 0 to 6. Available when Number Type is not Default. For most business metrics, 0 or 1 is enough. More than 2 adds false precision. |
Axes
The axis name sits alongside the axis line - below the category labels on X, to the left of the value scale on Y. Defaults to the field name. Change it when the field name is a database column like rev_usd_net that means nothing to a dashboard viewer.
Select X or Y before making changes. Settings apply to the selected axis only.
| Control | What it does |
|---|---|
| Show Axis Name | Shows or hides the axis name label. |
| Axis name text | Label text. Maximum 20 characters. Defaults to the field name. |
| Font family | Font applied to the axis name. |
| Font size | 5 to 30. |
| Bold / Italic | Weight and style. |
| Offset (%) | Distance between the axis name and the axis line as a percentage of the chart dimension. Increase if the axis name overlaps the axis labels below it. |
| Alignment | Start, center, or end along the axis. |
The axis line is the border between the plot area and the labels. Ticks are the small marks that align with each category value. Both are on by default. Hide them on minimal dashboard layouts where grid lines already provide sufficient reference and the axis line adds visual noise.
Select X or Y before making changes.
| Control | What it does |
|---|---|
| Show Axis Line | Shows or hides the axis line. Hiding it also hides ticks. |
| Line Color | Color of the axis line. |
| Line Width | Thickness of the axis line, 0 to 5. |
| Line Type | Solid, Dashed, or Dotted. |
| Show Ticks | Shows or hides tick marks on the axis line. |
| Tick Color | Color of the tick marks. |
| Tick Length | Length of the tick marks, 5 to 10. |
| Boundary Gap | Adds padding at both ends of the category axis so the first and last bars do not sit flush against the edges. On by default. Turn off to let bars extend to the full plot width. |
Axis labels are the text values along each axis - category names on X, numeric scale on Y. If they overlap or are unreadable, the chart fails regardless of how good the underlying data is.
Select X or Y before making changes. Hiding axis labels also hides the axis name.
| Control | What it does |
|---|---|
| Show Axis Label | Shows or hides labels along the axis. |
| Font family | Font applied to axis labels. |
| Font size | Label font size. |
| Bold / Italic / Color | Text styling. |
| Rotation | Angle of category label text. If category names are longer than 6 to 8 characters and you have more than 8 categories, set rotation to 30 or 45 degrees. At 0 degrees on a dense chart, labels stack on top of each other and nothing is readable. |
| Text case | Title Case, Uppercase, or Lowercase. Available on the categorical axis (X) only. Use to normalize inconsistent casing from the source - if values come through as all-caps from the database, Title Case fixes it here without touching the data. |
| Display Unit | Scale for numeric axis labels: Auto, None, Thousand, Million, or Billion. Available on the value axis (Y) only. Use when raw values like 4,300,000 make the axis scale unreadable. |
Grid lines give viewers a horizontal reference to trace a bar back to its value on the Y-axis. Y-axis grid lines are on by default and useful. X-axis grid lines run vertically through the bars and are rarely needed on a bar chart - they create a grid pattern that competes with the bars visually.
Select X or Y before making changes.
| Control | What it does |
|---|---|
| Show Gridlines | Shows or hides grid lines for the selected axis. |
| Grid Color | Color of the grid lines. |
| Left / Right / Top / Bottom | Plot area margins as a percentage. Increase Bottom when rotated axis labels are clipped by the chart edge. Increase Left when large Y-axis numbers run into the plot area. |
Interactivity
The tooltip appears when a viewer hovers over a bar, showing the dimension value and the measure. On by default and almost always the right call - it gives exact numbers on demand without cluttering every bar with a data label.
| Control | What it does |
|---|---|
| Show Tooltip | Shows or hides the tooltip on hover. |
| Trigger | Item: tooltip appears only for the hovered bar. Axis: tooltip appears for all series values at that X-axis position. The basic bar chart is single-series, so Item is the right choice here. |
| Pointer | When Trigger is Axis: the visual indicator shown on the axis - Line, Shadow, Cross, or None. Shadow is the default and most readable - it shades the full column behind the bars at that position. |
| Background Color | Tooltip background color. |
| Headers / Values tabs | Separate styling for the dimension label row (Headers) and the measure value row (Values). The Values tab includes Number Type, Display Unit, and Decimal Places. Format tooltip values to match what the viewer expects to see - not the raw database value. |
Controls the build animation when the chart first renders or when data refreshes. On by default. Turn it off on dashboards that auto-refresh on a short interval - repeated animations on every refresh become distracting quickly.
| Control | What it does |
|---|---|
| Enable Animation | Turns the build animation on or off. |
| Duration | How long the animation runs, 0 to 3000ms. The default is 1000ms. Below 300ms the animation is barely perceptible. Above 2000ms it feels slow and the dashboard feels unresponsive. |
| Delay | Time before the animation starts after the chart loads, 0 to 2000ms. Use this when multiple charts on a dashboard should animate in sequence rather than all at once. |
| Easing Function | The motion curve of the animation. Linear, Cubic Out, Bounce Out, Elastic Out, and 27 others. Cubic Out (the default) gives a natural deceleration. Elastic and Bounce are attention-grabbing - use them deliberately on presentation dashboards, not on operational ones. |
Data Zoom lets viewers scroll or zoom across the category axis when there are more categories than fit in the chart width. It does not filter data - it gives viewers a scrollable window into the full set.
Only enable when the category count genuinely requires it. A chart that scrolls by default signals that it is overcrowded. Pre-filtering to the most relevant categories in Transform is almost always the better fix. Use Data Zoom when the full category set is legitimately needed and viewers are expected to explore it.
| Control | What it does |
|---|---|
| Show Data Zoom | Shows or hides the zoom control. |
| Zoom Type | Slider: a draggable range bar below the chart. Inside: scroll-to-zoom directly on the plot area. Use Slider on dashboards where viewers expect a scrollbar UI. Avoid Inside on trackpad-scrolled dashboards - scroll events on the chart zoom the chart instead of scrolling the page, which is disorienting. |
| Slider Size (px) | Height of the slider bar, 10 to 100. Slider type only. Reduce only when vertical space is limited. |
| Position | Vertical position of the slider: Top, Middle, or Bottom. Bottom is the convention - viewers expect a scrollbar below the content, not above it. |
| Alignment | Horizontal position: Left, Center, or Right. |
| Orientation | Horizontal or Vertical. Horizontal scrolls across categories, which is the standard orientation for a bar chart. |
| Show Detail Label | Shows range values at the slider handles so viewers know which slice of data they are viewing. Turn on when category axis labels are not visible at the handle positions. |
| Background Color | Slider background. |
| Filler Color | Color of the selected range inside the slider. |
| Border Color | Slider border. |
| Handle Color | Color of the drag handles. |
| Brush Selection | Enables click-and-drag on the chart to zoom into a range. Useful for exploration dashboards. Disable on published dashboards where viewers are not expected to manipulate the chart view. |
Avoid Zoom Type "Inside" on dashboards that viewers scroll with a trackpad. Scroll events captured by the chart zoom the chart instead of scrolling the page, which is disorienting and hard to exit without knowing to click outside the chart first.
Emphasis controls the hover highlight effect - what happens visually when a viewer's cursor is over a bar. The default is subtle. Increase it on presentation dashboards where you want the active bar to stand out clearly from the rest.
| Control | What it does |
|---|---|
| Show Emphasis | Enables or disables the hover effect entirely. |
| Focus Type | Item: highlights only the hovered bar and dims the others. Series: highlights all bars equally (low value on a single-series chart). None: no visual change on hover. |
| Enable Scale | Scales the hovered bar slightly larger. Creates a satisfying interactive feel on clean dashboards. At Scale Size above 1.3 on a dense chart it becomes disruptive - neighboring bars appear to shift. |
| Scale Size | Scale factor, 1.0 to 2.0. 1.05 to 1.1 is enough to register. Above 1.3 is noticeable enough to distract from the data. |
| Shadow Blur | Blur radius of the drop shadow on the hovered bar, 0 to 30. At 0 there is no shadow. Above 20 the shadow bleeds into adjacent bars on dense charts. 8 to 12 gives a clean lift effect. |
| Shadow Color | Color of the drop shadow. |
| Shadow Offset X / Y | Shadow position offset, -20 to 20. A small positive offset (2 to 4) gives the bar a raised look. Large offsets look like a rendering error. |
| Border Width | Border added to the hovered bar, 0 to 10. Adds a visible outline when the cursor is over the bar. |
The Toolbox is an icon bar that gives viewers actions they can take directly on the chart: view the underlying data as a table, download the chart as an image, download the data as a CSV. It appears in a corner of the chart, either always visible or only on hover.
| Control | What it does |
|---|---|
| Show Toolbox | Shows or hides the toolbox. |
| Show Data View | Adds an icon to open the chart's underlying data as a table. Useful when viewers need to find the exact record behind a bar. |
| Image Download | Adds an icon to download the chart as a PNG. |
| Download CSV | Adds an icon to download the chart data as a CSV. |
| Position | Vertical position: Top, Middle, or Bottom. Top-right is the convention for chart toolbars. |
| Alignment | Horizontal position: Left, Center, or Right. |
| Orientation | Horizontal or Vertical arrangement of icons. |
| Icon Color | Color of the toolbox icons. Match to your dashboard's text or accent color. |
| Show on Hover | Hides the toolbox until the viewer hovers over the chart. Use on dashboards where a persistent icon bar would compete with the chart content. |
Best Practices
- Cap categories at 15 to 20. A chart with 50 bars is not a bar chart - it is an unreadable list. If your dimension has more values than that, pre-filter to the top 10 or 15 in Transform before building the chart. Use a sort + limit operation to surface the highest or lowest values. If the full list must be accessible, add Data Zoom and accept that the chart requires scrolling.
- Never rotate category labels when you can pre-shorten the values instead. Rotation is a last resort, not a default. A category value of "North America - Enterprise - Q2" can be shortened to "NA Ent Q2" in Transform before it ever reaches the chart. Labels at 45 or 90 degrees slow reading speed significantly.
- Match aggregation to the question, then say so in the title. Sum of revenue and Average revenue per order use the same field and look identical on the chart. They answer completely different questions. Put the aggregation in the chart title or axis name so the viewer is not guessing.
- Turn off Data Labels on charts with more than 8 categories. Beyond 8 bars, label text starts overlapping on all but the widest chart widths. If the viewer needs exact values, the Tooltip gives them that on hover. Data labels on every bar on a dense chart add noise without adding information.
- Do not use Corner Radius on charts with many narrow bars. At 10 categories or more, bars are narrow enough that a corner radius of 8 or higher turns each bar into a pill shape. The rounded cap sits above where the actual value is, which makes the bar height harder to read. Use 0 to 4 if you want rounded bars on a dense chart.
FAQs
Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.
Last updated on