Biofarma | Bind UI

Barline Chart

A barline chart component in a UI combines bar and line charts to display different types of data on the same graph. It is especially useful for comparing data trends over time (with the line) alongside discrete data points (with the bars).

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import { BarLineChart } from 'bio-bind-ui';

<BarLineChart
  data={{
    datasets: [
      {
        backgroundColor: '#008AA0',
        data: [800, 200, 400, 600, 900, 250],
        label: 'Data 1',
        order: 2,
        type: 'bar',
      },
      {
        borderColor: '#E8A800',
        borderWidth: 5,
        data: [850, 600, 100, 300, 200, 300],
        label: 'Data 2',
        order: 1,
        pointBorderWidth: 2,
        type: 'line',
      },
    ],
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  }}
  id='bar-line-chart'
  mode='light'
  name='BarLine Chart Horizontal Legend'
  options={{
    plugins: {
      legend: {
        position: 'top',
      },
    },
    scales: {
      x: {
        title: {
          display: true,
          text: 'Month',
        },
      },
      y: {
        max: 1000,
        min: 0,
        title: {
          display: true,
          text: 'Value',
        },
      },
    },
  }}
  size='sm'
  width={700}
/>

Examples

Size (Optional)

Use size for change the size of barline chart component: sm, md, and lg

Legend Position

Use legend position for change position of legend: left or right

Props

Props	Required	Default	Type	Description
id	true	-	`string`	A unique identifier for the chart component. This ID is used for referencing or targeting the chart in other parts of the application.
name	false	-	`string`	The name of the chart component. This can be used for labeling or identifying the chart within the UI.
data	true	-	`ChartData<'bar', 'line'>`	The main data input for the chart. It includes labels for the x-axis and datasets containing the values and styles for the bars or lines.
options	false	-	`ChartOptions<'bar', 'line'>`	An optional configuration object that allows customization of the chart’s appearance or behavior, such as colors, axis labels, or display preferences.
mode	false	`light`	`light`, `dark`	The mode of the chart bar-line. Determines whether the chart uses a light or dark theme.
size	false	`md`	`sm`, `md`, `lg`	The size of the chart bar-line. Can be small (sm), medium (md), or large (lg).
width	false	-	`number`	The width of the chart bar-line.
height	false	-	`number`	The height of the chart bar-line.

Chart Bar Chart Doughnut