<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="dcn"></div>
</body>
 var max = 50;

        var online = {
            x: [97, 97, 97, 97, 97, 30], //.map(toPercent),
            y: ['DHCP', 'DNS', 'GRID', 'LB', 'FW', 'Viapps'],
            name: 'Online',
            orientation: 'h',
            type: 'bar',
            marker: {
                color: 'rgba(14, 127, 0, 0.498039)',
                width: 1
            },
            type: 'bar'
        };

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

        var off =  {
            x: [1, 1, 1, 1, 1, 10],
            y: ['DHCP', 'DNS', 'GRID', 'LB', 'FW', 'Viapps'],
            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});
        
        console.log(dcn._fullData[0].name);
        hoverInfo = document.getElementById('hoverinfo');
        datacenter = document.getElementById('datacenter');
          
        dcn.on('plotly_hover', function(data){
            var infotext = data.points.map(function(d){
              //console.log(data);
              return (d.data.name+': '+d.x);
            });  
             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 = '';
        });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.