# Custom Charts

* The custom component in the designer will enable the user to add any third-party visual components to the dashboard. Which consumes data from all the available designer connectors.
* This component enables the dashboard capability to import any custom component from any third-party library which can consume data from designer connectors and interact with other dashboard components.
* Custom components have properties to configure JS and CSS source files. Dataset can be taken from the connector and a way to set these data and fields.
* Tooltip and Drill events can be captured and implemented the same as designer charts.

## Configuration Steps <a href="#configuration-steps" id="configuration-steps"></a>

* Drag and drop a ***Custom*** chart to the designer canvas.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Flj6UtdIGBfSsRwSCERZR%2Fimage.png?alt=media&#x26;token=246cd6d8-b586-4d46-8b0b-7ff310ff56d3" alt=""><figcaption></figcaption></figure>

* Click the the ***Property*** palette icon.
* Navigate to the **General** section.
* Click on the ***Source Path*** icon.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FhSzCj4a48VRnieSH4p1c%2Fimage.png?alt=media&#x26;token=5d2a37cb-2826-4a2e-b86f-27fd18092e2d" alt=""><figcaption></figcaption></figure>

* The Source Path and add the paths of JavaScript and CSS source files required for this chart.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FU5lZR6qCCkfV2sLBvTBw%2Fimage.png?alt=media&#x26;token=97afed8e-49d5-477e-9357-9dbb3f8bc9ad" alt=""><figcaption></figcaption></figure>

* Click on the ***Source Content*** icon from the General properties section.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FECO6X4BizOBH0wJnSEZ3%2Fimage.png?alt=media&#x26;token=fe355884-142f-4539-834e-cfd9b41839bb" alt=""><figcaption></figcaption></figure>

* In the HTML tab, add the HTML elements where the chart will be rendered or if additional HTML elements are required.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FsrwQ9YdXWNJ4IKf7suAB%2FCustom_html.png?alt=media&#x26;token=4d47a285-dbc4-4e1e-826e-dc89893c4f49" alt=""><figcaption></figcaption></figure>

* Click on the CSS tab and add the required styles for the formatting of the chart’s elements. Click on the JS tab, add the script configuration code required for this chart and configure the callback of the event, etc.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FvCnC9qerUlFHBHZG8wPX%2FCustom_JS.png?alt=media&#x26;token=2033ad90-1404-450f-8879-539d13f8e869" alt=""><figcaption></figcaption></figure>

* To access the properties set from the property palette in the custom chart configuration, we should use the ***bizvizchart*** as a reference.
* The ***bizvizchart*** gets treated as a reference to the ***Custom Chart*** object which is part of the dashboard.
* Using this reference, we can access the data and other properties in the chart configuration.
  * ***Examples***: bizvizchart.getData(), bizvizchart.getFields(), bizvizchart.getWidth(), bizvizchart.getHeight() are the methods.
* The ***bizvizchart.chartJson*** give them access to the entire configuration JSON done from the property palette.