
```jsx
import { CChart } from '@coreui/react-chartjs'
// or
import CChart from '@coreui/react-chartjs/src/CChart'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cchart-class-name">
        <td className="text-primary fw-semibold">className<a href="#cchart-class-name" aria-label="CChart className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="cchart-custom-tooltips">
        <td className="text-primary fw-semibold">customTooltips<a href="#cchart-custom-tooltips" aria-label="CChart customTooltips permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Enables custom html based tooltips instead of standard tooltips.</p>
        </td>
      </tr>
      <tr id="cchart-data">
        <td className="text-primary fw-semibold">data<a href="#cchart-data" aria-label="CChart data permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ChartData<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>`}</code>, <code>{`((canvas: HTMLCanvasElement) => ChartData<...>)`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The data object that is passed into the Chart.js chart (more info).</p>
        </td>
      </tr>
      <tr id="cchart-fallback-content">
        <td className="text-primary fw-semibold">fallbackContent<a href="#cchart-fallback-content" aria-label="CChart fallbackContent permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.</p>
        </td>
      </tr>
      <tr id="cchart-get-dataset-at-event">
        <td className="text-primary fw-semibold">getDatasetAtEvent<a href="#cchart-get-dataset-at-event" aria-label="CChart getDatasetAtEvent permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(dataset: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.</p>
        </td>
      </tr>
      <tr id="cchart-get-element-at-event">
        <td className="text-primary fw-semibold">getElementAtEvent<a href="#cchart-get-element-at-event" aria-label="CChart getElementAtEvent permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(element: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.</p>
        </td>
      </tr>
      <tr id="cchart-get-elements-at-event">
        <td className="text-primary fw-semibold">getElementsAtEvent<a href="#cchart-get-elements-at-event" aria-label="CChart getElementsAtEvent permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(elements: InteractionItem[], event: MouseEvent<HTMLCanvasElement, MouseEvent>) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.</p>
        </td>
      </tr>
      <tr id="cchart-height">
        <td className="text-primary fw-semibold">height<a href="#cchart-height" aria-label="CChart height permalink" className="anchor-link after">#</a></td>
        <td><code>{`150`}</code></td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Height attribute applied to the rendered canvas.</p>
        </td>
      </tr>
      <tr id="cchart-id">
        <td className="text-primary fw-semibold">id<a href="#cchart-id" aria-label="CChart id permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>ID attribute applied to the rendered canvas.</p>
        </td>
      </tr>
      <tr id="cchart-options">
        <td className="text-primary fw-semibold">options<a href="#cchart-options" aria-label="CChart options permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The options object that is passed into the Chart.js chart.</p>
        </td>
      </tr>
      <tr id="cchart-plugins">
        <td className="text-primary fw-semibold">plugins<a href="#cchart-plugins" aria-label="CChart plugins permalink" className="anchor-link after">#</a></td>
        <td><code>{`[]`}</code></td>
        <td><code>{`Plugin<keyof ChartTypeRegistry, AnyObject>[]`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The plugins array that is passed into the Chart.js chart (more info)</p>
        </td>
      </tr>
      <tr id="cchart-redraw">
        <td className="text-primary fw-semibold">redraw<a href="#cchart-redraw" aria-label="CChart redraw permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>If true, will tear down and redraw chart on all updates.</p>
        </td>
      </tr>
      <tr id="cchart-type">
        <td className="text-primary fw-semibold">type<a href="#cchart-type" aria-label="CChart type permalink" className="anchor-link after">#</a></td>
        <td><code>{`bar`}</code></td>
        <td><code>{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Chart.js chart type.</p>
        </td>
      </tr>
      <tr id="cchart-width">
        <td className="text-primary fw-semibold">width<a href="#cchart-width" aria-label="CChart width permalink" className="anchor-link after">#</a></td>
        <td><code>{`300`}</code></td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Width attribute applied to the rendered canvas.</p>
        </td>
      </tr>
      <tr id="cchart-wrapper">
        <td className="text-primary fw-semibold">wrapper<a href="#cchart-wrapper" aria-label="CChart wrapper permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Put the chart into the wrapper div element.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
