title: How to convert html with lots of svg charts into a pdf?
body: <p>I have a dashboard with lots of svg charts. I need to give a feature to export this entire html as a pdf.</p>
  
  <p>I looked into few tools like phantomjs and htmltocanvas etc. But I am unable to convert svg into pdf or even images. </p>
  
  <p>I thought, may be using htmltocanvas I'll first convert html into png and then convert png into pdf using phantomjs.</p>
  
  <p>htmltocanvas converts rest of the html page into png but not the svg charts.</p>
  
  <p>Is there any better way or tools to do this?</p>
  
  <p>Below is the code to convert html to image.</p>
  
  <pre><code>html2canvas($(".content"), {
              onrendered: function(canvas) {
                  var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                  window.location.href = img;
  
              }
          });
  </code></pre>
  
  <p>and one of the SVG chart is as follows.</p>
  
  <pre><code>&lt;svg width="330" height="320" style="overflow: hidden;"&gt;&lt;defs&gt;&lt;clipPath id="c3-1462852070590-clip"&gt;&lt;rect width="330" height="316"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;clipPath id="c3-1462852070590-clip-xaxis"&gt;&lt;rect x="-31" y="-20" width="392" height="20"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;clipPath id="c3-1462852070590-clip-yaxis"&gt;&lt;rect x="-29" y="-4" width="20" height="340"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;clipPath id="c3-1462852070590-clip-grid"&gt;&lt;rect width="330" height="316"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;clipPath id="c3-1462852070590-clip-subchart"&gt;&lt;rect width="330"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;g transform="translate(0.5,4.5)"&gt;&lt;text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="165" y="158" style="opacity: 0;"&gt;&lt;/text&gt;&lt;rect class="c3-zoom-rect" width="330" height="316" style="opacity: 0;"&gt;&lt;/rect&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-regions" style="visibility: hidden;"&gt;&lt;/g&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-grid)" class="c3-grid" style="visibility: hidden;"&gt;&lt;g class="c3-xgrid-focus"&gt;&lt;line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="316" style="visibility: hidden;"&gt;&lt;/line&gt;&lt;/g&gt;&lt;/g&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-chart"&gt;&lt;g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"&gt;&lt;rect class=" c3-event-rect c3-event-rect-0" x="0" y="0" width="330" height="316"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="c3-chart-bars"&gt;&lt;g class="c3-chart-bar c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-FS1 c3-bars c3-bars-FS1" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-bar c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-FS2 c3-bars c3-bars-FS2" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-bar c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-Renewal c3-bars c3-bars-Renewal" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-bar c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-Tele-sales c3-bars c3-bars-Tele-sales" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-lines"&gt;&lt;g class="c3-chart-line c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-FS1 c3-lines c3-lines-FS1"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-FS1 c3-areas c3-areas-FS1"&gt;&lt;/g&gt;&lt;g class=" c3-selected-circles c3-selected-circles-FS1"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-FS1 c3-circles c3-circles-FS1" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-line c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-FS2 c3-lines c3-lines-FS2"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-FS2 c3-areas c3-areas-FS2"&gt;&lt;/g&gt;&lt;g class=" c3-selected-circles c3-selected-circles-FS2"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-FS2 c3-circles c3-circles-FS2" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-line c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-Renewal c3-lines c3-lines-Renewal"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-Renewal c3-areas c3-areas-Renewal"&gt;&lt;/g&gt;&lt;g class=" c3-selected-circles c3-selected-circles-Renewal"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-Renewal c3-circles c3-circles-Renewal" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-line c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-shapes c3-shapes-Tele-sales c3-lines c3-lines-Tele-sales"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-Tele-sales c3-areas c3-areas-Tele-sales"&gt;&lt;/g&gt;&lt;g class=" c3-selected-circles c3-selected-circles-Tele-sales"&gt;&lt;/g&gt;&lt;g class=" c3-shapes c3-shapes-Tele-sales c3-circles c3-circles-Tele-sales" style="cursor: pointer;"&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-arcs" transform="translate(122.984375,158)"&gt;&lt;text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"&gt;&lt;/text&gt;&lt;g class="c3-chart-arc c3-target c3-target-FS1"&gt;&lt;g class=" c3-shapes c3-shapes-FS1 c3-arcs c3-arcs-FS1"&gt;&lt;path class=" c3-shape c3-shape c3-arc c3-arc-FS1" transform="" d="M7.154090006472169e-15,-116.83515625A116.83515625,116.83515625 0 1,1 -107.89143050974987,44.831829747643916L0,0Z" style="fill: rgb(31, 119, 180); cursor: pointer; opacity: 1;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;text dy=".35em" class="" transform="translate(77.74499355097029,51.88454845881587)" style="opacity: 1; text-anchor: middle; pointer-events: none;"&gt;68.7%&lt;/text&gt;&lt;/g&gt;&lt;g class="c3-chart-arc c3-target c3-target-FS2"&gt;&lt;g class=" c3-shapes c3-shapes-FS2 c3-arcs c3-arcs-FS2"&gt;&lt;path class=" c3-shape c3-shape c3-arc c3-arc-FS2" transform="" d="M-44.4439868873686,-108.0517735417486A116.83515625,116.83515625 0 0,1 -11.653578222643608,-116.25251760960121L0,0Z" style="fill: rgb(255, 140, 0); cursor: pointer; opacity: 1;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;text dy=".35em" class="" transform="translate(-22.67752725334393,-90.67535579576993)" style="opacity: 1; text-anchor: middle; pointer-events: none;"&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="c3-chart-arc c3-target c3-target-Renewal"&gt;&lt;g class=" c3-shapes c3-shapes-Renewal c3-arcs c3-arcs-Renewal"&gt;&lt;path class=" c3-shape c3-shape c3-arc c3-arc-Renewal" transform="" d="M-107.89143050974987,44.831829747643916A116.83515625,116.83515625 0 0,1 -44.4439868873686,-108.0517735417486L0,0Z" style="fill: rgb(0, 128, 0); cursor: pointer; opacity: 1;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;text dy=".35em" class="" transform="translate(-86.32911494813567,-35.82700522353499)" style="opacity: 1; text-anchor: middle; pointer-events: none;"&gt;25.1%&lt;/text&gt;&lt;/g&gt;&lt;g class="c3-chart-arc c3-target c3-target-Tele-sales"&gt;&lt;g class=" c3-shapes c3-shapes-Tele-sales c3-arcs c3-arcs-Tele-sales"&gt;&lt;path class=" c3-shape c3-shape c3-arc c3-arc-Tele-sales" transform="" d="M-11.653578222643608,-116.25251760960121A116.83515625,116.83515625 0 0,1 8.230819442412569e-14,-116.83515625L0,0Z" style="fill: rgb(214, 39, 40); cursor: pointer; opacity: 1;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;text dy=".35em" class="" transform="translate(-4.66725363658852,-93.35152454302703)" style="opacity: 1; text-anchor: middle; pointer-events: none;"&gt;&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-texts"&gt;&lt;g class="c3-chart-text c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-texts c3-texts-FS1"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-text c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-texts c3-texts-FS2"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-text c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-texts c3-texts-Renewal"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-chart-text c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"&gt;&lt;g class=" c3-texts c3-texts-Tele-sales"&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-grid)" class="c3-grid c3-grid-lines"&gt;&lt;g class="c3-xgrid-lines"&gt;&lt;/g&gt;&lt;g class="c3-ygrid-lines"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-axis c3-axis-x" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-xaxis)" transform="translate(0,316)" style="visibility: visible; opacity: 0;"&gt;&lt;text class="c3-axis-x-label" transform="" x="330" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"&gt;&lt;/text&gt;&lt;g class="tick" transform="translate(165, 0)" style="opacity: 1;"&gt;&lt;line y2="6" x1="0" x2="0"&gt;&lt;/line&gt;&lt;text y="9" x="0" transform="" style="text-anchor: middle; display: block;"&gt;&lt;tspan x="0" dy=".71em" dx="0"&gt;0&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;path class="domain" d="M0,6V0H330V6"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="c3-axis c3-axis-y" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"&gt;&lt;text class="c3-axis-y-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="1.2em" style="text-anchor: end;"&gt;&lt;/text&gt;&lt;g class="tick" transform="translate(0,296)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;0&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,257)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;10&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,218)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;20&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,179)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;30&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,140)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;40&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,101)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;50&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,62)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;60&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,23)" style="opacity: 1;"&gt;&lt;line x2="-6"&gt;&lt;/line&gt;&lt;text x="-9" y="0" style="text-anchor: end;"&gt;&lt;tspan x="-9" dy="3"&gt;70&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;path class="domain" d="M-6,1H0V316H-6"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="c3-axis c3-axis-y2" transform="translate(330,0)" style="visibility: hidden; opacity: 0;"&gt;&lt;text class="c3-axis-y2-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"&gt;&lt;/text&gt;&lt;g class="tick" transform="translate(0,316)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,285)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.1&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,253)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.2&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,222)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.3&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,190)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.4&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,159)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.5&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,127)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.6&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,96)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.7&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,64)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.8&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,33)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;0.9&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="tick" transform="translate(0,1)" style="opacity: 1;"&gt;&lt;line x2="6" y2="0"&gt;&lt;/line&gt;&lt;text x="9" y="0" style="text-anchor: start;"&gt;&lt;tspan x="9" dy="3"&gt;1&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;path class="domain" d="M6,1H0V316H6"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;g transform="translate(0.5,320.5)" style="visibility: hidden;"&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-subchart)" class="c3-chart"&gt;&lt;g class="c3-chart-bars"&gt;&lt;/g&gt;&lt;g class="c3-chart-lines"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"&gt;&lt;rect class="background" x="0" width="330" style="visibility: hidden; cursor: crosshair;"&gt;&lt;/rect&gt;&lt;rect class="extent" x="0" width="0" style="cursor: move;"&gt;&lt;/rect&gt;&lt;g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"&gt;&lt;rect x="-3" width="6" height="6" style="visibility: hidden;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"&gt;&lt;rect x="-3" width="6" height="6" style="visibility: hidden;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="c3-axis-x" transform="translate(0,0)" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&amp;amp;t=dashboardMenuOption#c3-1462852070590-clip-xaxis)" style="opacity: 0;"&gt;&lt;g class="tick" transform="translate(165, 0)" style="opacity: 1;"&gt;&lt;line y2="6" x1="0" x2="0"&gt;&lt;/line&gt;&lt;text y="9" x="0" transform="" style="text-anchor: middle; display: block;"&gt;&lt;tspan x="0" dy=".71em" dx="0"&gt;0&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;path class="domain" d="M0,6V0H330V6"&gt;&lt;/path&gt;&lt;/g&gt;&lt;/g&gt;&lt;g transform="translate(258.2671875,0)"&gt;&lt;g class=" c3-legend-item c3-legend-item-FS1" style="visibility: visible; cursor: pointer;"&gt;&lt;text x="14" y="131" style="pointer-events: none;"&gt;FS1&lt;/text&gt;&lt;rect class="c3-legend-item-event" x="0" y="117" width="43.296875" height="19" style="fill-opacity: 0;"&gt;&lt;/rect&gt;&lt;rect class="c3-legend-item-tile" x="0" y="122" width="10" height="10" style="pointer-events: none; fill: rgb(31, 119, 180);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class=" c3-legend-item c3-legend-item-FS2" style="visibility: visible; cursor: pointer; opacity: 1;"&gt;&lt;text x="14" y="150" style="pointer-events: none;"&gt;FS2&lt;/text&gt;&lt;rect class="c3-legend-item-event" x="0" y="136" width="43.296875" height="19" style="fill-opacity: 0;"&gt;&lt;/rect&gt;&lt;rect class="c3-legend-item-tile" x="0" y="141" width="10" height="10" style="pointer-events: none; fill: darkorange;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class=" c3-legend-item c3-legend-item-Renewal" style="visibility: visible; cursor: pointer; opacity: 1;"&gt;&lt;text x="14" y="169" style="pointer-events: none;"&gt;Renewal&lt;/text&gt;&lt;rect class="c3-legend-item-event" x="0" y="155" width="68.25" height="19" style="fill-opacity: 0;"&gt;&lt;/rect&gt;&lt;rect class="c3-legend-item-tile" x="0" y="160" width="10" height="10" style="pointer-events: none; fill: green;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class=" c3-legend-item c3-legend-item-Tele-sales" style="visibility: visible; cursor: pointer; opacity: 1;"&gt;&lt;text x="14" y="188" style="pointer-events: none;"&gt;Tele sales&lt;/text&gt;&lt;rect class="c3-legend-item-event" x="0" y="174" width="74.03125" height="19" style="fill-opacity: 0;"&gt;&lt;/rect&gt;&lt;rect class="c3-legend-item-tile" x="0" y="179" width="10" height="10" style="pointer-events: none; fill: rgb(214, 39, 40);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>There are many more such charts on a single html page.</p>