RGraph: HTML5 canvas graph library - Line chart documentation

The line graph, along with the bar chart, is probably the most configurable of all the charts available.

The example file is here.

<script>
    window.onload = function ()
    {
        var data = [10,4,17,50,25,19,20,25,30,29,30,29];
    
        var line = new RGraph.Line("myLine", data);
        line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
        line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
        line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
        line.Set('chart.colors', ['rgba(255,0,0,1)']);
        line.Set('chart.linewidth', 2);
        line.Set('chart.filled', true);
        line.Set('chart.hmargin', 5);
        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        line.Set('chart.border', 'rgba(255,255,255,1)');
        line.Set('chart.gutter', 40);
        line.Draw();
    }
</script>

Combining the Line and Bar charts

You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. Find out more here. In the same vain, you can have Y axes on both the left and right.

Available properties

You can use these properties to control how the bar graph apears. You can set them by using the Set() method. Eg:

myLine.Set('name', 'value');