skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
4
comments
150%
passed
5
failed
5
coverage
100%

BarChart

grommet-controls
3.0.2

Component

browse
docs
issues
import { BarChart } from 'grommet-controls';

Multi Axis

browse
docs
issues
() => (
  <BarChart
    data={rndDatasets(2, [{ yAxisID: 'y-axis-0' }, { yAxisID: 'y-axis-1' }])}
    options={{
      tooltips: {
        mode: 'index',
        intersect: true,
      },
      scales: {
        yAxes: [
          {
            type: 'linear',
            display: true,
            position: 'left',
            id: 'y-axis-0',
          },
          {
            type: 'linear',
            display: true,
            position: 'right',
            id: 'y-axis-1',
            gridLines: {
              drawOnChartArea: false,
            },
          },
        ],
      },
    }}
  />
)

Commits

Date
Author
Commit Message
8/30/2020

atanasster

avatar of atanasster
update versions for publish
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
react-chartjs-2
^17.0.1
Bar
*

Internal dependencies

file
imports
"../withChartTheme"
withChartTheme

Stories

Main

browse
docs
issues
() => (
  <BarChart
    data={{
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Dataset 1',
          data: [-40, 92, -44, -75, -65, -89, 78],
          borderWidth: 1,
        },
        {
          label: 'Dataset 2',
          data: [-78, -21, -43, 70, 11, -91, -63],
          borderWidth: 1,
        },
      ],
    }}
  />
)

Stacked

browse
docs
issues
() => (
  <BarChart
    data={rndDatasets(3)}
    options={{
      tooltips: {
        mode: 'index',
        intersect: true,
      },
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    }}
  />
)

Stacked Group

browse
docs
issues
() => (
  <BarChart
    data={rndDatasets(3, [
      { stack: 'stack-1' },
      { stack: 'stack-2' },
      { stack: 'stack-1' },
    ])}
    options={{
      tooltips: {
        mode: 'index',
        intersect: true,
      },
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    }}
  />
)

Mixed Line

browse
docs
issues
() => (
  <BarChart
    data={rndDatasets(2, [{ type: 'line', fill: false }, { type: 'bar' }])}
  />
)
Previous
validation/TextInputField
Next
chartjs/DoughnutChart