BarChart

Properties

• layout'horizontal' | 'vertical'

  The layout of chart defines the orientation of axes, graphical items, and tooltip.

  DEFAULT: "horizontal"

• syncIdStringoptional

  Charts with the same syncId will synchronize Tooltip and Brush events.

  Examples:

  • Two synchronized AreaChart

• syncMethod'index' | 'value' | functionoptional

  Customize how the charts will synchronize tooltips and brushes. `index`: synchronize using the data index in the data array. Index expects that all data has the same length. `value`: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout). function: a custom sync method which receives tick and data as argument and returns an index.

  DEFAULT: "index"

• widthPercent | Number

  The width of chart container. Can be a number or a percent string like "100%".

• heightPercent | Number

  The height of chart container. Can be a number or a percent string like "100%".

• dataArray

  The source data. Each element should be an object.

  FORMAT:

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

• marginObject

  Empty space around the container.

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

  FORMAT:

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

• 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.

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

  The type of offset function used to generate the lower and upper values in the series array. The types are built-in offsets in d3-shape. Only applicable for stacked Area or Bar charts. Has no effect when the stackId prop is not set on Area or Bar components.

  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

• 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.