A simple example of using a basic chart created within the ninjaPixel.js framework

<!DOCTYPE HTML>
<html>

<head>
    <title>ninjaPixel.js Bar Chart</title>
</head>
<style>
    .ninja-axis path,
    .ninja-axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    .ninja-background {
        fill: #333333;
        stroke: black;
    }
    text {
        font: 12px sans-serif;
        position: absolute;
    }
    .ninja-chartTitle {
        font: 18px sans-serif;
    }
    .yTitle,
    .xTitle {
        font: 16px sans-serif;
    }
    .ninja-horizontalGrid,
    .ninja-verticalGrid {
        stroke: black;
        opacity: 0.7;
    }
</style>

<body>
    <div id="chart"></div>
    <div id="message"></div>
</body>
<script src="ninjaPixel.bundle.js" charset="utf-8"></script>
<script>
    var barChart = new ninjaPixel.BarChartSimpleExample();
    barChart.transitionDuration(2000)
            .margin({ top: 50, bottom: 50, left: 60, right: 30
        })
        .y1Max(10)
        .plotBackground(true)
        .plotHorizontalGrid(true)
        .transitionDelay(function (d, i) { return i * 30;})
        .height(400)
        .title('Random Bars')
        .yAxis1Title('Y Value')

function ready() {
        var data = randomBars();
        barChart.plot(d3.select("#chart")
            .datum(data));
    }

ready();
    
    setTimeout(function run() { 
         ready();
        setTimeout(run, 5000); 
    }, 5000);
</script>

</html>