Biofarma | Bind UI

Line Chart

A line chart component in a UI is designed to visualize continuous data over time or across ordered categories. It uses a series of data points connected by straight lines, making it ideal for displaying trends, patterns, and relationships in data.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

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

<LineChart
  data={{
    datasets: [
      {
        backgroundColor: '#008AA0',
        borderColor: '#008AA0',
        borderWidth: 5,
        data: [100, 250, 300, 500, 250, 150],
        fill: true,
        label: 'Data 1',
        pointBorderWidth: 2,
      },
      {
        backgroundColor: '#FF6E00',
        borderColor: '#E8A800',
        borderWidth: 5,
        data: [850, 600, 100, 300, 200, 300],
        fill: true,
        label: 'Data 2',
        pointBorderWidth: 2,
      },
    ],
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  }}
  id='line-chart'
  mode='light'
  name='Line Chart Solid'
  options={{
    plugins: {
      legend: {
        position: 'top',
      },
    },
    scales: {
      x: {
        title: {
          display: true,
          text: 'Month',
        },
      },
      y: {
        title: {
          display: true,
          text: 'Value',
        },
      },
    },
  }}
  size='sm'
  width={700}
/>

Examples

Variant

Use variant for change the variant of line chart component: solid or smooth

Size (Optional)

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

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<line>`	The main data input for the chart. It includes labels for the x-axis and datasets containing the values and styles for the lines.
options	false	-	`ChartOptions<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 line. Determines whether the chart uses a light or dark theme.
size	false	md	`sm`, `md`, `lg`	The size of the chart line. Can be small (sm), medium (md), or large (lg).
width	false	-	`number`	The width of the chart line.
height	false	-	`number`	The height of the chart line.

Chart Doughnut Chart Radar