<!DOCTYPE html> <html> <head> <style> .axis path { fill: none; stroke: #C0C0C0; shape-rendering: crispEdges; } .tick.major line { stroke: #C0C0C0; shape-rendering: crispEdges; } .viz { height: 500px; } .area { fill: steelBlue; } .y-title, .x-title { font-size: 20px; font-weight: bold; } .legend { font-size: 12px; } .vizkit-tooltip { background-color: whiteSmoke; padding: 5px; border: 1px solid #E0E0E0; } .vizkit-tooltip h1 { font-size: 12px; } rect { stroke: black; fill: white; } .bar-set-1 .bar { fill: #7591FF; } .key-1 { fill: #7591FF; } </style> </head> <body> <div class="viz"></div> <script src="../lib/d3.js"></script> <script src="../vizkit.js"></script> <script> var data = [ [ {"key": "foobar", "xValue": '1', "yValue": '1'}, {"key": "foobar", "xValue": '2', "yValue": '2'}, {"key": "foobar", "xValue": '3', "yValue": '3'}, {"key": "foobar", "xValue": '4', "yValue": '4'}, {"key": "foobar", "xValue": '5', "yValue": '5'} ] ]; var DrawViz = vizkit.barchart(data) .xAxis({scale: 'ordinal'}) .legend({symbol: {type: 'square'}}); DrawViz(d3.select('.viz')); </script> </body> </html>