About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

An SVG Line chart

A dark-themed filled Line chart that also has the spline option enabled. Circular tickmarks are enabled. The svg tag has a black background and the line is colored dark blue. It uses the trace effect and has a semi-opaque fill color - so you can see the background through it.

Note that this choice of colors may not be best suited for someone who has sight difficulties as the difference in colors (the black and the dark blue) may be too slight for them to distinguish.

Also, a chart that shows the achievements of individual figures, like this one does, may be more suited to a Bar (horizontal or vertical) as the data is not a continuing series, but more a set of individual numbers that apply (in this case) to a group of people.

In terms of responsiveness when the screen is smaller the labels change to use dual lines and the tickmarks disappear.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<div style="float: right">
    <div style="width: 750px; height: 300px; background-color: black; box-shadow: 3px 3px 3px #ccc" id="chart-container"></div>
</div>
This is the code that generates the chart - it should be placed AFTER the div tag:
<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [5,8,6,3,4,1,9,8,2,3,5,6,7,8,9,4,5,6,3,2,5,4,8,6,4,5,3,1,6,4,5],
        options: {
            backgroundGridVlinesCount: 11,
            marginInner: 0,
            textColor: 'white',
            textFont: 'Verdana',
            filled: true,
            filledColors: ['rgba(25,51,74,0.75)'],
            colors: ['#5AF'],
            marginRight: 40,
            marginBottom: 50,
            marginTop: 20,
            xaxis: false,
            yaxis: false,
            yaxisScaleUnitsPost: 'm',
            yaxisScaleUnitsPre: '$',
            tickmarksFill: 'black',
            tickmarksLinewidth: 2,
            linewidth: 4,
            spline: true,
            responsive: [
                {maxWidth: null,width:750,height:300,options: {xaxisLabels: ['Kev','John','Fred','July','Fred','Olga','Ben','Boris','Lenny','Pete','Lewis'],marginLeft: 65,textSize: 14,tickmarksStyle: 'circle',tickmarksSize: 5,linewidth: 3}, parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 1000, width:400,height:200,options: {xaxisLabels: ['Kev','\nJohn','Fred','\nJuly','Fred','\nOlga','Ben','\nBoris','Lenny','\nPete','Lewis'],marginLeft: 50,textSize: 10,tickmarksStyle: '',tickmarksSize: 3,linewidth: 2}, parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).trace();
</script>