# Butterfly Chart with Ploty.js

Hi,

new to this library so forgive me if silly question.

I am interested in creating something like this Create a Butterfly Chart Easily Using Plotly | by My Data Talk | Towards Data Science

But I can’t use ploty.py , I can only use ploty.js , how can I achieve it?

Looked areound but not able to find any.

Thank you.

ChatGPT geve me the answer.

Posting here if someone has the same question

Sure, here’s an example of how to create a butterfly graph using Plotly.js as a horizontal bar chart:

htmlCopy code

``````<!DOCTYPE html>
<html>
<head>
<title>Butterfly Graph with Plotly.js</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>

<script>
var trace1 = {
x: [1, 4, 6, 4, 1],
y: [1, 2, 3, 4, 5],
type: 'bar',
orientation: 'h',
marker: {
color: 'blue',
},
};

var trace2 = {
x: [-1, -4, -6, -4, -1],
y: [1, 2, 3, 4, 5],
type: 'bar',
orientation: 'h',
marker: {
color: 'red',
},
};

var layout = {
title: 'Butterfly Graph',
xaxis: {title: 'X-axis'},
yaxis: {title: 'Y-axis'},
barmode: 'overlay',
width: 600,
height: 400
};

var data = [trace1, trace2];

Plotly.newPlot('graph', data, layout);
</script>
</body>
</html>
``````

In this example, we define two `trace` objects, one for the blue curve and one for the red curve, each with their own x and y values. We set the `type` to ‘bar’ and the `orientation` to ‘h’ to create a horizontal bar chart. We also set the `marker` property to define the color of the bars.

We then define the `layout` object, which sets the title and axis labels of the graph, as well as its size. We also set the `barmode` property to ‘overlay’ to overlap the bars.

Finally, we create an array `data` that contains the two trace objects, and we call `Plotly.newPlot` to create the graph in the `div` element with ID ‘graph’.