---
id: use-events-on-chart
title: Use Events on Chart Created Through Custom Component
---
This guide will use the Custom Component to create a chart using a third-party library that supports events. Plotly is one of the libraries that supports events. In this tutorial, we will build a chart using Plotly and add events.
## Step 1: Add a Custom Component
- Open the App Builder and add a Custom Component to the page.
- Click on the Custom Component to open the Properties panel.
Note: If you are not familiar with the Custom Component, please read the [Custom Component](/docs/widgets/custom-component/) documentation.
## Step 2: Add the Code to the Custom Component
In the Code section of the `Custom Component` properties, add the following code:
```js
import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min';
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory';
// Define the custom component
const MyCustomComponent = ({ data, updateData, runQuery }) => {
// Create Plot component using Plotly
const Plot = createPlotlyComponent(Plotly);
// Define onClick handler for bars
const barOnClick = ({ points }) => {
alert('A bar is clicked');
};
// Render the component
return (
);
};
// Connect the component
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
// Render the connected component to the DOM
ReactDOM.render(
, document.body);
```
**The steps to implement the above code is as follows:**
- Import the required libraries.
```js
import React from 'https://cdn.skypack.dev/react'; // React library
import ReactDOM from 'https://cdn.skypack.dev/react-dom'; // React DOM library
import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core'; // Material UI library
import Plotly from 'https://cdn.skypack.dev/plotly.js-basic-dist-min'; // Plotly library
import createPlotlyComponent from 'https://cdn.skypack.dev/react-plotly.js/factory'; // Plotly React library
```
- Create a function component called `MyCustomComponent`. This component will render the chart. The `createPlotlyComponent` function is used to create a Plotly component.
- A function called `barOnClick` is created that will be called when the user clicks on the bar. This function will display an alert message.
```js
const MyCustomComponent = ({data, updateData, runQuery}) => { // function component
const Plot = createPlotlyComponent(Plotly); // create a Plotly component
const barOnClick = ({points}) => { // function that will be called when the user clicks on the bar
alert('A bar is clicked') // display an alert message
}
```
- Render the chart using the `Plot` component. Pass the data and layout to the `Plot` component. Also pass the `barOnClick` function to the `onClick` prop of the `Plot` component.
```js
return (
);
};
```
- Render the `MyCustomComponent` component using the `ReactDOM.render` function.
```js
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); // connect the component to the Tooljet store
ReactDOM.render(
, document.body); // render the component
```
## Step 3: Using Events from the Custom Component
In the code above, we created a function called `barOnClick` that will be called when the user clicks on the bar. This function holds the code that will be executed when the user clicks on the bar.
```js
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
```
Instead of displaying an alert message, you can use the `runQuery` function to run a query.
```js
const barOnClick = ({points}) => {
runQuery('queryName')
}
```
`runQuery` is a function which accepts a query name as a string used to run the query from the custom component. Learn more about the custom component [here](/docs/widgets/custom-component/).
