.net Powerful JavaScript charts
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 use for showing charts on your website.

More »


Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to hosted libraries.

More »


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

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>
This is the code that generates the chart - it should be placed AFTER the div tag:
    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'}}