Related
Im trying to fix this bug, and I have tried alot things but nothing help, if I give value of x='23%' like <text id="badgeText" x = "23% ... I can fix bug on safari but than bug start repodruce everytime on other browsers(mozila,chrome etc...), anyhow the bug is reproducing once in many times on other browsers ...
bug image
<div class="CoveoShowIfFieldValue" data-field="#isRecommended" data-field-value="True">
<svg height="25px" style="overflow:visible!important;">
<g id="recommendedBadge" style="object-fit:contain!important;">
<rect x="0" y="0" rx="15px" ry="15px"/>
<text id="badgeText" y="66%" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;"></text>
<g class="tooltip" transform="translate(21,62)">
<rect x="-6%" width="450" y="-35" height="25" rx="5px" ry="5px"/>
<text y="-31" dy="1em" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip"></text>
</g>
</g>
</svg> </div>
It’s not a bug:
You need to add some width related properties like width or a viewBox.
Otherwise a browser can’t tell how to render a relative unit within a svg element.
Some browsers might be more forgiving by guessing or setting default width values as fallbacks. (Currently most firefox and chromium based browsers use 300px as a fallback).
<style>
svg {
border: 1px solid red;
height: 25px;
}
text {
fill: #fff;
}
</style>
<h2>Use viewBox</h2>
<svg viewBox="0 0 450 25" style="overflow:visible!important;">
<g id="recommendedBadge">
<rect x="0" y="0" rx="15" ry="15" width="100%" height="25" />
<text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;">
Badge Text
</text>
<g class="tooltip" transform="translate(0 25)">
<rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" />
<text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text>
</g>
</g>
</svg>
<br><br><br>
<h2>Use width</h2>
<svg height="25" width="100%" style="overflow:visible!important;">
<g id="recommendedBadge">
<rect x="0" y="0" rx="15" ry="15" width="100%" height="25" />
<text id="badgeText" x="50%" y="50%" dy="2" dominant-baseline="middle" font-family="Metric" text-anchor="middle" class="CoveoText" data-value="RECOMMENDED" style="text-transform: uppercase;">
Badge Text
</text>
<g class="tooltip" transform="translate(0 25)">
<rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="red" />
<text x="50%" y="50%" dy="5" font-family="Metric" text-anchor="middle" font-weight="100" class="CoveoText" data-value="RecommendedTooltip">tooltip</text>
</g>
</g>
</svg>
I am using animateMotion to have an animation on my path. Here is the simple code:
<!DOCTYPE html>
<html>
<head>
<title>Example Of Many Things!</title>
</head>
<body>
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</svg>
</body>
<script type="text/javascript">
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5"></mpath></animateMotion></circle>'
g8t3.insertAdjacentHTML( 'beforeend', circleAnim );
// // now move circle on the path
var g8t4 = document.getElementById('5t6');
var path = document.getElementById('5t6').getElementsByTagName('path')[0]
path.setAttribute("id", "path5t6");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end"><mpath xlink:href="#path5t6"></mpath></animateMotion></circle>'
g8t4.insertAdjacentHTML( 'beforeend', circleAnim );
</script></html>
As you can see, there is a green circle on the path which is moving, which is correct.
But there is something weird: There is also another green circle on the left bottom of the graph, which is redundant. I don't how it appears and how I can get rid of it.
Any help?
Instead of appending two circles in your svg, append the two <animateMotion>s inside a single circle. Also, you'll probably want to set your <animationMotion>'s fill attribute to "fill".
As you wrote it, when your circles are in idle state, they will come back to their initial position (unset).
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = '<circle r="1" fill="green">' +
// first part of the anim
'<animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5" fill="freeze"></mpath></animateMotion>' +
// second part of the anim
'<animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end" fill="freeze"><mpath xlink:href="#path5t6"></mpath></animateMotion>' +
'</circle>'
g8t3.insertAdjacentHTML('beforeend', circleAnim);
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</g>
</svg>
I am trying to print a list inside of a rectangular element in React. Currently, the list is printing correctly (so I know am formatting everything correctly in regards to including li tags around the items, etc.) above the rectangle, and the rectangle prints below it. The text "Title Here" prints correctly inside the box. The problem is that the list must be represented by a state, and is of unknown size. How do I print this list inside the rectangle?
<div>
<ul>{this.state.ListText}</ul>
<svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
<defs>
<linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
<stop stopColor="#9198A1" offset="0%"></stop>
<stop stopColor="#888D95" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
</defs>
<g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
<g id="Medications" transform="translate(732.000000, 106.000000)">
<g id="Rectangle-7">
<use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
</g>
<text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000">
<tspan x="165" y="39">Title Here</tspan>
</text>
</g>
</g>
</g>
</svg>
</div>
You can use a foreignObject to embed HTML in your SVG.
You can use jQuery to manipulate the foreignObject DOM properties and to append HTML such as your list.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>{this.state.ListText}</ul>
<span id='cont'>
<svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
<defs>
<linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
<stop stopColor="#9198A1" offset="0%"></stop>
<stop stopColor="#888D95" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
</defs>
<g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
<g id="Medications" transform="translate(732.000000, 106.000000)">
<g id="Rectangle-7">
<use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
</g>
<text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000" >
<tspan x="165" y="39">Title Here</tspan>
</text>
<foreignObject width="100" height="300"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is my list</p>
</body>
</foreignObject>
</g>
</g>
</g>
</svg>
</span>
</div>
<script>
var ul = $('<ul>');
["Item 1", "Item 2", "Item 3"].forEach(function(item) {
ul.append($("<li>").text(item));
});
$('foreignObject').append(ul);
$('foreignObject body').append(ul);
</script>
I have an "roulette roll" svg file, but it does nothing. If I tried it on localhost everything was working perfectly! On hosting, it's just like "picture" doing nothing. Question is, how could I fix it?
.svg file code: http://pastebin.com/dsyD3vft
Container:
<div class="wheel_container col s6" style="padding: none;">
<object type="image/svg+xml" data="wheel.svg" class="wheel" id="wheel">Your browser does not support SVG</object>
</div>
CSS:
.wheel {
width:100%;
z-index: 0;
display:block;
}
Javascript:
$("object").load(function() {
wheelSVG = $("object").contents().find("svg");
spinner = spinner.add(wheelSVG.find("#spin"));
center = wheelSVG.find("#ui ellipse");
centerText = wheelSVG.find("#number");
clearInterval(beforeLoginSpinInterval);
if(!loggedinn) {
beforeLoginSpinInterval = setInterval(function() {
currentRotation += 0.25;
spinner.css("transform", 'rotate('+currentRotation+'deg)');
}, 20);
}
});
Spin
<g xmlns="http://www.w3.org/2000/svg" id="spin">
<g>
<g>
<path class="st1" d="M432.3,38.5c-34.2,7.3-68.1,18.3-101.3,33.1s-64,32.7-92.3,53.1l72.2,99.4l-0.4,0.3 c21.6-15.7,45.1-29.3,70.5-40.6c25.3-11.3,51.2-19.6,77.3-25.2l-0.5,0.1L432.3,38.5z"/>
</g>
<text transform="matrix(0.9136 -0.4067 0.4067 0.9135 322.6442 175.6196)" class="st0 st2 st3">14</text>
</g>
<g>
<g>
<path class="st4" d="M237.9,125.3c-28.2,20.6-54.8,44.4-79.1,71.4s-45.2,55.9-62.7,86.1l106.4,61.4l-0.2,0.4 c13.4-23.1,29.3-45.1,47.9-65.8s38.8-38.8,60.4-54.5l-0.4,0.3L237.9,125.3z"/>
</g>
<text transform="matrix(0.6691 -0.7431 0.7431 0.6691 210.1937 276.5912)" class="st0 st2 st5">7</text>
</g>
<g>
<g>
<path class="st1" d="M95.6,283.6c-17.4,30.3-32,62.8-43.2,97.4s-18.6,69.4-22.3,104.2l122.2,12.8l-0.1,0.5 c2.8-26.5,8.4-53.2,17-79.5c8.6-26.4,19.7-51.2,33-74.3l-0.2,0.4L95.6,283.6z"/>
</g>
<text transform="matrix(0.309 -0.951 0.9511 0.309 124.1028 456.9215)" class="st0 st2 st6">13</text>
</g>
<g>
<g>
<path class="st4" d="M30,486.2c-3.6,34.8-3.6,70.4,0.2,106.5s11.3,71,22,104.2L169,659l0.2,0.5c-8.2-25.4-13.9-52-16.8-79.6 s-2.8-54.8-0.1-81.3l-0.1,0.5L30,486.2z"/>
</g>
<text transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 123.8907 608.0349)" class="st0 st2 st7">6</text>
</g>
<g>
<g>
<path class="st1" d="M52.4,697.9c10.9,33.2,25.3,65.8,43.5,97.3c18.2,31.5,39.2,60.3,62.5,86.3l91.3-82.2l0.3,0.4 c-17.8-19.8-33.9-41.8-47.7-65.9s-24.9-48.9-33.2-74.3l0.2,0.5L52.4,697.9z"/>
</g>
<text transform="matrix(-0.5 -0.866 0.866 -0.5 200.3061 792.6865)" class="st0 st2 st8">12</text>
</g>
<g>
<g>
<path class="st4" d="M159.1,882.2c23.4,25.9,49.9,49.8,79.3,71.2c29.4,21.4,60.3,39.1,92.2,53.4l50-112.3l0.4,0.2 c-24.4-10.9-48-24.4-70.4-40.7c-22.4-16.3-42.6-34.6-60.5-54.4l0.3,0.4L159.1,882.2z"/>
</g>
<text transform="matrix(-0.809 -0.5878 0.5878 -0.809 312.469 893.9415)" class="st0 st2 st9">5</text>
</g>
<g>
<g>
<path class="st1" d="M331.5,1007.2c31.9,14.1,65.8,25.2,101.4,32.8s71,11.2,105.9,11.3V928.4h0.5c-26.7,0-53.8-2.8-80.9-8.6 c-27.1-5.8-53-14.2-77.4-25.1l0.4,0.2L331.5,1007.2z"/>
</g>
<text transform="matrix(-0.9782 -0.2079 0.2079 -0.9781 500.8162 960.7355)" class="st0 st2 st10">11</text>
</g>
<g>
<g>
<path class="st4" d="M539.8,1051.3c34.9-0.1,70.4-3.7,105.9-11.3s69.4-18.6,101.4-32.8l-50-112.3l0.4-0.2 c-24.4,10.8-50.3,19.3-77.4,25.1c-27.1,5.8-54.2,8.6-80.9,8.6h0.5V1051.3z"/>
</g>
<text transform="matrix(-0.9782 0.2079 -0.2079 -0.9781 651.1284 945.1309)" class="st0 st2 st10">4</text>
</g>
<g>
<g>
<path class="st1" d="M748,1006.8c31.9-14.3,62.8-32,92.2-53.4c29.4-21.4,55.8-45.3,79.3-71.2L828.2,800l0.3-0.4 c-17.9,19.8-38.1,38.1-60.5,54.4c-22.4,16.3-46,29.9-70.4,40.7l0.4-0.2L748,1006.8z"/>
</g>
<text transform="matrix(-0.809 0.5878 -0.5878 -0.809 826.7827 849.8548)" class="st0 st2 st9">10</text>
</g>
<g>
<g>
<path class="st4" d="M920.2,881.5c23.3-26,44.3-54.8,62.5-86.3c18.2-31.5,32.6-64.1,43.5-97.3l-116.9-38l0.2-0.5 c-8.3,25.4-19.3,50.3-33.2,74.3s-29.9,46-47.7,65.9l0.3-0.4L920.2,881.5z"/>
</g>
<text transform="matrix(-0.5 0.866 -0.866 -0.5 915.7706 727.7227)" class="st0 st2 st8">3</text>
</g>
<g>
<g>
<path class="st1" d="M1026.4,697c10.7-33.3,18.2-68.1,22-104.2c3.8-36.1,3.7-71.8,0.2-106.5L926.4,499l-0.1-0.5 c2.8,26.5,2.8,53.8-0.1,81.3s-8.6,54.2-16.8,79.6l0.2-0.5L1026.4,697z"/>
</g>
<text transform="matrix(-0.1045 0.9945 -0.9945 -0.1045 959.8926 558.2834)" class="st0 st2 st7">9</text>
</g>
<g>
<g>
<path class="st4" d="M1048.5,485.2c-3.7-34.7-11.1-69.6-22.3-104.2c-11.2-34.6-25.8-67.1-43.2-97.4l-106.4,61.4l-0.2-0.4 c13.3,23.1,24.4,48,33,74.3c8.6,26.4,14.2,53,17,79.5l-0.1-0.5L1048.5,485.2z"/>
</g>
<text transform="matrix(0.309 0.951 -0.9511 0.309 931.2808 385.5747)" class="st0 st2 st6">2</text>
</g>
<g>
<path class="st1" d="M982.5,282.8c-17.5-30.2-38.4-59.1-62.7-86.1s-50.8-50.8-79.1-71.4l-72.2,99.4l-0.4-0.3 c21.6,15.7,41.8,33.9,60.4,54.5s34.5,42.7,47.9,65.8l-0.2-0.4L982.5,282.8z"/>
<text transform="matrix(0.6691 0.7431 -0.7431 0.6691 834.8956 239.4054)" class="st0 st2 st5">8</text>
</g>
<g>
<g>
<path class="st4" d="M839.9,124.7c-28.3-20.5-59.2-38.4-92.3-53.1s-67.1-25.7-101.3-33.1l-25.5,120.2l-0.5-0.1 c26.1,5.6,52,13.9,77.3,25.2s48.9,24.9,70.5,40.6l-0.4-0.3L839.9,124.7z"/>
</g>
<text transform="matrix(0.9136 0.4067 -0.4067 0.9135 687.3855 145.1121)" class="st0 st2 st3">1</text>
</g>
<g>
<path class="st11" d="M645.3,38.3c-34.2-7.2-69.6-11-106-11c-36.3,0-71.8,3.8-106,11l25.5,120.2l-0.5,0.1 c26.1-5.5,53.2-8.4,80.9-8.4c27.7,0,54.8,2.9,80.9,8.4l-0.5-0.1L645.3,38.3z"/>
<text transform="matrix(1 0 0 1 514.27 118.9369)" class="st0 st2 st12">0</text>
</g>
If your code was working correctly on localhost and now it does not work on server, I would recommend you checking with your web host if they support SVG files and that the mime type is added.
additionally you could embed the entire svg code in your html thereby saving another call to your server and eliminating the doubt whether webserver supports svg or not.
Also you should save the file as compressed SVG instead of standard illustrator svg
I have a d3 / nvd3 graph which seems to be "clipped" by half...
Hereafter is the code (sorry, quite long, but a copy/paste in an html file works). Normally I have one bar by hour (so 24 bars) here I put only three hours.
The html is splitter in sections :
The legend [g class="nv-x nv-axis" transform="translate(0,235)"]
Y axis: [g class="nv-y nv-axis"]
One bar by hours: [g class="nv-barsWrap"]
We see only the top half of the Y axis and Bars, the bottom legend is lost. But it does exist on the html ! and we can "inspect" it... I don't get what is happening, but there is this "clip" rectangle I don't master... ( [clipPath id="nv-x-label-clip-6678"] )
<div id="chart">
<svg>
<g class="nvd3 nv-wrap nv-discreteBarWithAxes">
<g transform="translate(60,15)">
<defs>
<clipPath id="nv-x-label-clip-6678">
<rect width="20.912863070539423" height="16" x="-10.456431535269711">
</rect>
</clipPath>
</defs>
<g class="nv-x nv-axis" transform="translate(0,235)">
<g class="nvd3 nv-wrap nv-axis">
<g>
<g transform="translate(6.390041493775935,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">00</text>
</g>
<g transform="translate(18.008298755186722,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,17)" x="0" style="text-anchor: middle;">01</text>
</g>
<g transform="translate(29.62655601659751,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">02</text>
</g>
<path class="domain">
</path>
<text class="nv-axislabel" text-anchor="middle" y="36" x="140.00000000000003" transform="translate(0,17)">
</text>
</g>
</g>
</g>
<g class="nv-y nv-axis">
<g class="nvd3 nv-wrap nv-axis">
<g>
<g transform="translate(0,235)" style="opacity: 1;">
<line class="tick zero" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="0" y="0" style="text-anchor: end;">0.0</text>
</g>
<g transform="translate(0,192.54290876242095)" style="opacity: 1;">
<line class="tick" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">200.0</text>
</g>
<g transform="translate(0,150.0858175248419)" style="opacity: 1;">
<line class="tick" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">400.0</text>
</g>
</g>
</g>
</g>
<g class="nv-barsWrap">
<g class="nvd3 nv-wrap nv-discretebar" transform="translate(0,0)">
<g>
<g class="nv-groups">
<g class="nv-group nv-series-0" style="stroke-opacity: 1; fill-opacity: 0.75;">
<g transform="translate(1.6846473217010498,0)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="235" width="9.41078838174274" class="discreteBar">
</rect>
</g>
<g transform="translate(13.30290412902832,166.00723266601562)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="68.99277326106593" width="9.41078838174274" class="discreteBar">
</rect>
</g>
<g transform="translate(24.921161651611328,175.98464965820312)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="59.01535682023487" width="9.41078838174274" class="discreteBar">
</rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
It is most likely because the container does not have enough room to contain the graph. Add height=100% and width=100% or some arbitrary large number of pixels to test it out (to the div containing the chart).