docs/versioned_docs/version-2.35.0/how-to/use-events-on-chart.md
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.
<div style={{textAlign: 'center'}}> </div> </div> <div style={{paddingTop:'24px', paddingBottom:'24px'}}>Note: If you are not familiar with the Custom Component, please read the Custom Component documentation.
</div> <div style={{paddingTop:'24px', paddingBottom:'24px'}}>In the Code section of the Custom Component properties, add the following code:
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 (
<Container>
<Plot
data={[
{
name: 'Inbound',
type: 'bar',
x: [20, 14, 23, 22, 30, 12, 15, 26, 31, 16, 18, 29],
y: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
marker: {
line: {
color: 'rgba(55, 128, 191, 1.0)',
width: 1,
},
color: 'rgba(55, 128, 191, 0.6)',
},
orientation: 'h',
},
{
name: 'Outbound',
type: 'bar',
x: [12, 18, 29, 22, 14, 23, 15, 23, 26, 13, 27, 12],
y: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
marker: {
line: {
color: 'rgba(255, 153, 51, 1.0)',
width: 1,
},
color: 'rgba(255, 153, 51, 0.6)',
},
orientation: 'h',
},
]}
layout={{
width: 840,
height: 800,
title: 'Tickets Resolved: Inbound & Outbound',
showlegend: false,
}}
onClick={barOnClick}
/>
</Container>
);
};
// Connect the component
const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
// Render the connected component to the DOM
ReactDOM.render(<ConnectedComponent />, document.body);
The steps to implement the above code is as follows:
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
MyCustomComponent. This component will render the chart. The createPlotlyComponent function is used to create a Plotly component.barOnClick is created that will be called when the user clicks on the bar. This function will display an alert message.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
}
Plot component. Pass the data and layout to the Plot component. Also pass the barOnClick function to the onClick prop of the Plot component. return (
<Container>
<Plot
data={[
{
name: 'Inbound',
type: 'bar',
x: [20, 14, 23, 22, 30, 12, 15, 26, 31, 16, 18, 29],
y: ['Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
marker: {
line: {
color: 'rgba(55, 128, 191, 1.0)',
width: 1,
},
color: 'rgba(55, 128, 191, 0.6)',
},
orientation: 'h',
},
{
name: 'Outbound',
type: 'bar',
x: [12, 18, 29, 22, 14, 23, 15, 23, 26, 13, 27, 12],
y: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
marker: {
line: {
color: 'rgba(255, 153, 51, 1.0)',
width: 1,
},
color: 'rgba(255, 153, 51, 0.6)',
},
orientation: 'h',
},
]}
layout={{
width: 840,
height: 800,
title: 'Tickets Resolved: Inbound & Outbound',
showlegend: false,
}}
onClick={barOnClick}
/>
</Container>
);
};
MyCustomComponent component using the ReactDOM.render function.const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); // connect the component to the Tooljet store
ReactDOM.render(<ConnectedComponent />, document.body); // render the 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.
const barOnClick = ({points}) => {
alert('A bar is clicked')
}
Instead of displaying an alert message, you can use the runQuery function to run a query.
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.