@licuido-ui/ui_bar-chart

Bar Chart

A bar chart is a popular and effective data visualization tool used to represent categorical data with rectangular bars. Each bar's length or height corresponds to the value it represents, allowing for a quick comparison between different categories. Bar charts are particularly useful for displaying discrete data points and comparing the relative sizes or quantities of different groups or categories.

Author

• @author Raslan [e-mail]

Story Book Link to Slider

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/bar-chart

Image

Import component

import { BarChart } from '@licuido-ui/bar-chart';

<BarChart option={{}} series={[]} />

Image

Props

Property	Type	Description	Default Value
LineChartProps
className	string	Represents the class name for the LineChart component.	''
sx	SxProps	Represents the style props for the LineChart component.	{}
headerStyle	SxProps	Represents the style props for the header of the LineChart component.	undefined
graphStyle	SxProps	Represents the style props for the graph in the LineChart component.	undefined
graphComponentStyle	SxProps	Represents the style props for the LineChart component.	undefined
options	ApexCharts.ApexOptions	Represents the options for the ApexCharts.	undefined
series	ApexAxisChartSeries | ApexNonAxisChartSeries	Represents the series for the ApexCharts.	[]
headerComponent	string | React.ReactNode	Represents the header component for the LineChart.	undefined
width	string | number	Represents the width of the LineChart component.	'100%'
height	string | number	Represents the height of the LineChart component.	'auto'

Option props

Option	Description	Example Value
chart	Object containing the chart configuration, including the ID of the chart.	{ id: 'basic-line', type: 'line' }
xaxis	Object containing the configuration for the X-axis, such as categories for the chart.	{ categories: [1991, 1992, 1993] }
stroke	Object defining the curve of the line.	{ curve: 'smooth' }
title	Object containing the title configuration for the chart.	{ text: 'Line Chart' }
subtitle	Object containing the subtitle configuration for the chart.	{ text: 'Sample Subtitle' }
markers	Object defining the size of the markers on the chart.	{ size: 6, strokeWidth: 0 }
yaxis	Object containing the configuration for the Y-axis, including the title of the Y-axis.	{ title: { text: 'Values' } }
grid	Object defining the grid configuration for the chart, including row colors and opacity.	{ row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 } }
dataLabels	Object defining whether data labels are enabled or not.	{ enabled: false }
tooltip	Object defining the configuration for the tooltip, including enabling it and setting the font size.	{ enabled: true, style: { fontSize: '12px' } }

Sample Props

<BarChart
        options={{
          chart: {
            toolbar: {
              show: false,
            },
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
            position: 'bottom',
            labels: {
              style: {
                colors: 'green',
              },
            },
          },
          yaxis: {
            labels: {
              style: {
                colors: 'green',
              },
            },
          },
          plotOptions: {
            bar: {
              borderRadius: 5,
              distributed: false,
              horizontal: false,
            },
          },
          tooltip: {
            enabled: true,
            style: {
              fontSize: '12px',
            },
            // Customize tooltip if needed
             custom: function ({ series, dataPointIndex }: any) {
              let tooltipContent = '<div style=“background-color: #fff; padding: 5px; border: 1px solid #E3E3E3;“>';
              series.map((singleSeries: any) => {
                tooltipContent += '<div>';
                tooltipContent += `<span>${singleSeries[dataPointIndex]}</span>`;
                tooltipContent += '</div>';
              });
              tooltipContent += '</div>';
              return tooltipContent;
            },
          },
          dataLabels: {
            enabled: false,
            style: {
              colors: ['black'],
            },
          },
          title: {
            text: 'Company',
            align: 'center',
          },
          subtitle: {
            text: 'policy',
            align: 'center',
          },
          grid: {
            row: {
              colors: ['#f3f3f3', 'transparent'],
              opacity: 0.5,
            },
          },
        }}
        series={[
          {
            name: 'Desktop',
            data: [30, 40, 45, 50, 49, 60, 70, 91, 100],
          },
          {
            name: 'PC',
            data: [40, 50, 65, 70, 89, 90, 95, 99, 110],
          },
        ]}
        width={500}
        height={300}
      />