Add functionality

Hey guys, I enjoyed the plotly but I’d like add a functionality, I wanted to expand the level of information, eg By clicking the portentagem lead to another tab or on the same display more information about what is outside, see the picture and you will understand.

I need something very similar to this

Here’s how:

Tks Etienne you always help me. I need to go through the URL clicked element, see my example, I would like to pass Y, X and the name.
d = datacenter s = service e = element

dcn.on(‘plotly_click’, function(data) {
//var win =‘http://localhost/contingencia/’, ‘_blank’);

It brings me an object array with 3 arrays in, I need to know which object he clicked to pass as a parameter, as a filter understand?


Yes. This post here Documentation on Plotly hover and click events - #2 by etienne should get you started.

See if you understand my problem:

You see, I can not know which of the objects (points: Array [3]) the user clicked, besides, I’m trying to pass a third parameter (I am sending the link to CodePen), as you can see in the last picture, I have the need to present a% percentage service availability and Hover event display the amount of equipment, but the parameter “z” not entr year scope of the object as “x” and “y”
curveNumber: 0
data: Object
fullData: Object
pointNumber: 5
x 30
xaxis: Object
y “Viapps”
yaxis: Object

it is in: (
data: Object
marker: Object
name: “Online”
orientation: “h”
type: “bar”
uid: “544a35”
x: Array [6]
y: Array [6]
z: Array [6]
0: 1000
1: 200
2: 30
3: 12
4: 653
5: 90
length: 6
proto: Array [0]


Ah I’m sorry, my code:

In the event the “points” returns me 3 arrays, I can know the “point number” but I do not know which “CurveNumber” the user clicked

Has anyone done something similar?

I managed to solve the issue of sending another parameter now lacks only the question of taking the “CurveNumber” I can not know in which the user clicked …

My solution for the third parameter per graph…

var online = {
x: [50, 97, 97, 97, 97, 30], //.map(toPercent),
y: [‘DHCP’, ‘DNS’, ‘GRID’, ‘LB’, ‘FW’, ‘Viapps’],
data: [1000,200,30,453,653,10],
name: ‘Online’,
orientation: ‘h’,
type: ‘bar’,
marker: {
color: ‘rgba(14, 127, 0, 0.498039)’,
width: 1
type: ‘bar’

    var standby =  {
        x: [40, 2, 2, 2, 2, 60],
        y: ['DHCP', 'DNS', 'GRID', 'LB', 'FW', 'Viapps'],
        data: [5,3,3,12,13,3],
        name: 'Standby',
        orientation: 'h',
        type: 'bar',
        marker: {
            color: '#66a3ff',
            width: 1
        type: 'bar'

    var off =  {
        x: [10, 1, 1, 1, 1, 10],
        y: ['DHCP', 'DNS', 'GRID', 'LB', 'FW', 'Viapps'],
        data: [2,1,0,12,1,2],//qtd de offs
        name: 'Offline',
        orientation: 'h',
        type: 'bar',
        marker: {
            color: '#ff4d4d',
            width: 1
        type: 'bar'

    var data = [online, standby, off];

    var layout = {
        title: 'Data Center Norte',
        barmode: 'stack',
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: '#e6e6e6',
        xaxis: {
            ticksuffix: '%'

    Plotly.newPlot('dcn', data, layout, {displayModeBar: false});
    hoverInfo = document.getElementById('hoverinfo');
    datacenter = document.getElementById('datacenter'); 
    dcn.on('plotly_hover', function(data){
        var infotext ={
        var zindex  =[d.pointNumber];
          return(': '+zindex);
         datacenter.innerHTML = '<h5><b>DCN</b></h5>'+'-><strong>'+data.points[0].y+'</strong>';
         hoverInfo.innerHTML = infotext.join('<br/>');
     .on('plotly_unhover', function(data){
        datacenter.innerHTML = '';
        hoverInfo.innerHTML = '';

The data are fictitious, then the percentage of mathematics is not right.
I’m just showing what I wanted

dcn.on(‘plotly_click’, function(data) {
var point ={
//var url = 'http://url/contingencia/table.php?d=dcn&s=’+data.points[0].y.toLowerCase();
//var win =, ‘_blank’);
the return is 0 ,1 and 2, that is, that is, he is returning all columns. I need to know what indices was selected

Thus it returns me all levels, need to know which index was used to launch the click event. My code:
myDiv.on(‘plotly_click’, function(data) {
var point ={

Is it possible or not?

Sorry for the wait. No unfortunately, there’s no easy way to tell which bar element is being clicked on at the moment.

Basically, the click event data mimics the data being shown in the hover labels. So, in your case, the click event points have length 3.

It’s a shame, this feature would help me a lot. Tks again Etienne!!!