UikChart

This is a wrapping component with styles and some custom elements (tooltip) above react-chartjs-2 and chartjs. Please read full documentation of those libraries if you are not familiar with them.

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullWrapping className
minHeightNumberfalsenullMinimum height of the chart
maxHeightNumberfalsenullMaximum height of the chart
widthNumberfalsenullFIxed width of the chart. Otherwise responsive to the changing width.
heightNumberfalsenullFixed eight of the chart.
optionsObjectfalsenull

Chart options, read more at chartjs documentation.

dataObjectfalsenull

Chart data & datasets, read more at chartjs documentation.

tooltipRendererFunctionfalsenullCustom tooltip renderer, see source code (src/components/UikChart/CustomTooltip) for a example reference
chartTypeStringfalse"Line"

Line, Bar and others, see chartjs documentation.

UikChart Example

ComponentExample Code
<UikChart
  chartType="Bar"
  data={ {
    labels: [
      'Mon',
      'Tue',
      'Wed',
    ],
    datasets: [
      {
        borderColor: '#1665D8',
        backgroundColor: '#1665D8',
        label: 'Visitors',
        data: [
          1239,
          764,
          2013,
        ],
      },
    ],
  } }
  height={ 400 }
/>