Bar Chart

StaticBarChart component.

Properties

• config: Config [R] – chart configuration object, specifies the data
  • Config:
    • bars: Bar[] – array of configurations of the bars
  • Bar:
    • label: string [R] – label displayed below the bar and in the tooltip
    • color: d3-color.color – color of the bar
    • value: number [R] – determines the height of the bar
• height: number [R]
• margin: Margin
• padding: number (0 to 1) – specifies the proportion of the width that is reserved for blank space between bars
• colors: d3-color.color[] – colors of the bars
• minValue: number – minimum of the y-axis
• maxValue: number – maximum of the y-axis
• withTooltip: boolean – enables tooltip
• withTransition: boolean – enables animations (smooth transitions) of zoom, movement, data update, etc.
• withZoom: boolean – enables zoom
• zoomLevelMin: number
• zoomLevelMax: number
• className: string
• style: object

Colors of the bars

If Bar.color is set, it is used as the fill color for the bar. If it is not set, the corresponding element of the colors property is used (cyclic indexing).

Setting the data to display

To set the data, use the config property and set the label and value of each bar. This chart does not fetch any data from the server, it only displays the data it got through its properties.

Example

<StaticBarChart 
  config={{
    bars: [
      {label: "Tea",
       color: rgb(50,205,50),
       value: 5},
      {label: "Coffee",
       color: rgb(222,184,135),
       value: 10},
    ]
  }}
  height={300}
/>