BarChart

Properties

• layout'horizontal' | 'vertical'

  The layout of bars in the chart.

  DEFAULT: 'horizontal'

• syncIdStringoptional

  If any two categorical charts(LineChart, AreaChart, BarChart, ComposedChart) have the same syncId, these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.

  Examples:

  • Two synchronized AreaChart

• syncMethod'index' | 'value' | functionoptional

  When syncId is provided, allows customisation of how the charts will synchronize tooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index.

  DEFAULT: 'index'

• widthNumber

  The width of chart container.

• heightNumber

  The height of chart container.

• dataArray

  The source data, in which each element is an object.

  FORMAT:

  [{ name: 'a', value: 12 }]
  [{ name: 'a', value: [5, 12] }]

• marginObject

  The sizes of whitespace around the container.

  DEFAULT: { top: 5, right: 5, bottom: 5, left: 5 }

  FORMAT:

  { top: 5, right: 5, bottom: 5, left: 5 }

• barCategoryGapPercentage | Number

  The gap between two bar categories, which can be a percent value or a fixed value.

  DEFAULT: '10%'

• barGapPercentage | Number

  The gap between two bars in the same category.

  DEFAULT: 4

• barSizeNumber | Percentageoptional

  The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.

  Examples:

  • Tiny BarChart
  • Mix BarChart with stacked bars and unstacked bars

• maxBarSizeNumber

  The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.

  DEFAULT:

• stackOffset'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign'

  The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.

  DEFAULT: 'none'

  Examples:

  • A barChart stacked by sign of value
  • D3 stackOffset

• reverseStackOrderBooleanoptional

  If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)

  DEFAULT: false

• onClickFunctionoptional

  The customized event handler of click in this chart.

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter in this chart.

• onMouseMoveFunctionoptional

  The customized event handler of mousemove in this chart.

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave in this chart.

• onDoubleClickFunctionoptional

  The customized event handler of dblclick in this chart.

• onContextMenuFunctionoptional

  The customized event handler of contextmenu in this chart.