bar

Transforms column charts into horizontal bar charts.

Creates rounded corners on bars/columns. Available since v3.26.0.

Specifies whether to apply rounding around both ends or only to a single end.

Percentage of available grid width occupied by columns. Range: 0% to 100%.

Percentage of available grid height for horizontal bars. Range: 0% to 100%.

Enables discrete bar mode where each value represents one bar per series.

In timeline charts, enables bars to overlap instead of stacking.

In multi-series timeline charts, groups horizontal rows together rather than stacking them vertically.

Prevents zero-value bars from occupying space in non-stacked grouped configurations.

Adds dots at starting and ending points of range bars.

Endpoint colours for the y: [low, high] form, per series: [[startColor, endColor]].

chart.type: 'dumbbell' with one series per measure takes its colours from colors instead, so that each dot is coloured after the series it belongs to.

Available since v7.1.0. Applies to chart.type: 'dumbbell', and to any range bar drawn with isDumbbell.

The connector's thickness is barHeight (rows) or columnWidth (columns), and the size of the marked ends is markers.size: they are the bar and its markers, so they are configured as such. Only what is specific to the comparison lives here.

plotOptions: {
  bar: {
    barHeight: 6,
    dumbbell: {
      connector: { opacity: 0.55 },
      dataLabels: { enabled: true },
      tooltip: { differenceLabel: 'Change' }
    }
  }
}

The line joining the marked ends.

A solid colour for the join.

Left undefined, the connector is a gradient between the two endpoint colours, resolved per row so that a row where the measures cross still runs the right way.

Connector opacity. The join is context for the two marked ends, not a third mark competing with them.

A value written at each end of the connector, in that end's own colour.

Default on for chart.type: 'dumbbell' (the pair of numbers is the comparison, and reading them off an axis costs the glance the chart was meant to save), off for the bare isDumbbell flag on a range bar.

With three or more measures only the two extremes are labelled. Anything between them sits on the connector, where a label has nowhere to go that is not over the line or over its neighbour.

Whether to write a value at each marked end.

Clearance from the marked end, in px, outward from the connector.

When true, each label takes its own end's colour, so a value is tied to a measure by more than its position. Set false to colour them all through dumbbell.dataLabels.style.colors.

Formats one endpoint value. Receives (value, { seriesIndex, dataPointIndex, endpointIndex, w }), where endpointIndex says which measure the end belongs to.

It defaults to the value axis' own label formatter, not dataLabels.formatter. On a range bar that one reads out end - start, which is the gap rather than an endpoint.

plotOptions: {
  bar: {
    dumbbell: {
      dataLabels: {
        formatter: function (val) {
          return val + '%'
        }
      }
    }
  }
}

Typography for the end labels.

Font size for the end labels.

Font family for the end labels. Falls back to chart.fontFamily.

Font weight for the end labels.

Label colours, indexed by endpoint. Used only when dumbbell.dataLabels.colorFromMarker is false.

Tooltip wording specific to the dumbbell readout.

Names the gap between two endpoints, which is the reason the two dots are on one row.

The row appears only when exactly two endpoints are visible; with three or more, "the difference" names nothing.

Activates funnel chart mode.

Applies 3D shadow effects to funnel chart bars.

Defines color mappings for specific value ranges.

colors: {
    ranges: [{
        from: 0,
        to: 10,
        color: '#FF0000'
    }]
}

Custom background colors for bar rectangles.

Transparency level for background bar colors.

Border radius for background bar rectangles.

Label placement options: top, center, or bottom.

Maximum displayable data-labels on the chart.

Hides overlapping labels in stacked charts.

Label orientation: horizontal or vertical.

Displays cumulative values in stacked configurations.

Custom formatting for total values.

dataLabels: {
    total: {
        formatter: function (val, opts) {
            return opts.w.globals.seriesTotals[opts.dataPointIndex]
        }
    }
}

Left positioning adjustment for total label.

Vertical positioning adjustment for total label.

ForeColor of total label. Default: #373d3f.

FontSize for total label. Default: 12px.

FontFamily for total label.

Font-weight for total label. Default: 600.