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

More »

 

Download
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 cdnjs.com hosted libraries.

Download »

 

License
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 »

10 example charts

Written by Richard Heyes, RGraph author, on 5th June 2017

RGraph is a powerful library - it has a lot of features that are available to you as a result of its many years of existence (it was started in 2008). As I'll show below, it's not, however, difficult to get up and running with some basic charts and then add more customization from there. There's not a lot that can go wrong when you start out - especially when you have the hundreds of demos that are available to you in the download archive. Below you'll find 10 examples of svg charts - and as mentioned there are more in the download archive but if it's canvas examples that you want, you'll find lots more in the demos folder in the download archive. I've set them up using colors and data etc so you should find it easy to incorporate them into your own pages. If you want to customise them further (I'd imagine you will!) simply use the documentation.

So let's begin...

What you need to do first is include the RGraph svg libraries: 

<script src="/js/RGraph.svg.common.core.js"></script>
<script src="/js/RGraph.svg.common.tooltips.js"></script>
<script src="/js/RGraph.svg.bar.js"></script>
<script src="/js/RGraph.svg.line.js"></script>
<script src="/js/RGraph.svg.pie.js"></script>
<!-- Add more libraries as necessary -->

And then you need to add the div tag that determines where the chart will show up: 

<div style="width: 650px; height: 300px; display: inline-block" id="chart-container"><div>

And then it's just a matter of defining the code that crates the chart. The examples of each chart are below.

Bar chart

To create a Bar chart you need to include the core and Bar chart libraries, and the tooltips library too if required. For Horizontal Bar charts there's an example below. The style of the tooltips is mostly left as the default except that the text is bolded. This is done using the tooltipsCss property. Here's the chart and the code that produces it: 

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [13,56,16,15,12],
        options: {
            colorsSequential: true,
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: '%{property:xaxisLabels[%{dataset}]}: %{value}%{property:yaxisScaleUnitsPost}',
            tooltipsCss: {
                fontWeight:  'bold'
            },
            xaxisLabels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            xaxisColor: '#aaa',
            yaxisColor: '#aaa',
            yaxisLabelsCount: 11,
            yaxisScaleUnitsPost: 'm',
            marginLeft: 45,
            textSize: 9,
            marginInner: 25
        }
    }).draw();
</script>

Line chart

You can create a Line chart as the code here shows by including the Line chart library instead of the Bar chart library. By default, the lines are not filled - but you can change this by using the filled property (set it to true). These fills can be both semi-transparent (set the correct colors) or they can be stacked on top of each other (using the filledAccumulative property. 

<script>
    names = ["Africa", "Asia", "Europe", "Latin America", "North America"];

    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [1,2,4,8,16],
            [8,6,5,2,4],
            [4,9,5,6,3],
            [1,2,5,9,6],
            [4,8,5,5,5]
        ],
        options: {
            spline: true,
            linewidth: 3,
            tickmarksStyle: 'filledcircle',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: '%{key}',
            tooltipsFormattedKeyLabels: names,
            tooltipsFormattedUnitsPost: ',000',
            tooltipsCss: {
                fontWeight: 'bold',
                textAlign: 'left'
            },
            xaxisLabels: ['1960','1970','1980','1990','2000'],
            key: names,
            keyTextSize:12,
            xaxisColor: '#aaa',
            yaxisColor: '#aaa',
            yaxisLabelsCount: 10,
            yaxisScaleUnitsPost: 'k',
            marginLeft: 45,
            textSize: 9
        }
    }).draw();
</script>

Pie chart

Pie charts are created with the Pie chart library. They only show one dataset, but they can show tooltips which can hold more information. In addition it could be said that comparing two segments that aren't positioned next to each other can be tricky - particularly if the difference is subtle. 

<script>
    new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [24,52,7,7,4],
        options: {
            linewidth: 3,
            colorsStroke: 'white',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            tooltips: '%{prop:key[%{index}]}: %{value}',
            tooltipsCss: {
                fontWeight: 'bold'
            },
            key: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            textSize: 10,
            marginTop: 50,
            title: 'A Pie chart showing some figures!',
            titleItalic: true,
            titleY: 22
        }
    }).draw();
</script>

Radar chart

Radar charts, also known by a variety of other names (eg Spider graph, Web charts) can be created with the Radar chart library. Bigger charts might be visually more appealing, but it's your choice of course! 

<script>
        new RGraph.SVG.Radar({
            id: 'chart-container',
            data: [
                [4,8,6,9,4,5,6,8,7,9],
                [5,4,8,9,9,8,6,3,5,4]
            ],
            options: {
                tickmarksStyle: 'none',
                linewidth: 3,
                filled: true,
                filledAccumulative: false
            }
        }).draw();
</script>

Rose chart

The Rose chart can sometimes also be called a Polar area chart. They're similar to Pie charts but the angle size is fixed (by default) and the radius of each segment changes. They can be stacked to represent multiple values and/or the angle size of each segment can be made to be variable by using the variant property (only the canvas version of the Rose chart supports this variant). 

<script>
    new RGraph.SVG.Rose({
        id: 'chart-container',
        data: [5,8,6,4,3,5,6],
        options: {
            colorsSequential: true,
            exploded: 2,
            backgroundGridRadialsCount: 0,
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).draw();
</script>

Donut chart

Donut charts are, unsurprisingly, drawn using the Pie chart and by setting the donut property to true. Other than this they're much the same as Pie charts. 

<script>
    new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [4,8,6,3,5,9,9],
        options: {
            donut: true,
            shadow: true,
            tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            tooltipsCss: {
                fontSize: '20pt'
            }
        }
    }).draw();
</script>

Horizontal Bar chart

A Horizontal Bar chart is made using the Horizontal Bar chart library. It can be regular, stacked or grouped just like regular Bar charts and, of course support tooltips, making use of the tooltips library. These charts can fit well when you want a bar style chart but have limited horizontal space. 


<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [4,8,6,3,5,8,9],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colorsSequential: true,
            tooltips: '%{prop:yaxisLabels[%{dataset}]}s results: %{value} widgets sold',
            tooltipsCss: {
                fontWeight: 'bold'
            },
            yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            yaxisColor: '#ccc',
            xaxisColor: '#ccc',
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2"],
            marginInner: 10,
            title: 'Daily totals of widgets sold',
            textSize: 16,
            titleBold: true,
            titleItalic: true
        }
    }).draw();
</script>

Grouped Bar chart

A variant of the Bar chart - the data is formatted slightly differently to regular Bar charts (multi-dimensional array versus regular flat array). Other than the data formatting the code for the Bar chart is the same. The colors are used on a "per-group" basis but you can change this with the colorsSequential property. 

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[420,310],[510,270],[520,550],[545,2478]],
        options: {
            marginLeft: 65,
            marginTop: 75,
            marginInner: 25,
            colors: ["#3e95cd", "#8e5ea2"],
            tooltips: 'Revenue: $%{value}',
            tooltipsCss: {
                fontWeight: 'bold'
            },
            yaxisScaleUnitsPre: '$',
            xaxisLabels: ['2020','2030','2040','2050'],
            title: 'Projected revenue',
            titleSubtitle: 'From the sale of widgets on the market sales',
            key: ['Frankie','Bruno'],
            xaxisColor: '#aaa',
            xaxisTickmarks: 0,
            yaxisColor: '#aaa',
            yaxisTickmarks: 0
        }
    }).draw();
</script>

Mixed Bar & Line chart

Mixed Bar charts and Line charts are a common combination chart that you'll frequently see in use. This one is using a grouped Bar chart along with multiple lines (but only one Line chart object). Both the bar and Line chart have tooltips enabled. The Bar chart has its axes disabled and the Line chart axes are colored to blend in to the background grid. 

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[420,310],[510,270],[520,550],[545,2478]],
        options: {
            marginLeft: 65,
            marginInner: 25,
            colors: ["#eee","#eee"],
            tooltips: 'Revenue: %{prop:yaxisScaleUnitsPre}%{value}',
            tooltipsCss: {
                fontWeight: 'bold'
            },
            yaxisScaleUnitsPre: '$',
            title: 'Widgets sold throughout the early 21st century',
            titleBold: true,
            xaxisColor: '#aaa',
            xaxisTickmarks: 0,
            yaxisColor: '#aaa',
            yaxisTickmarks: 0
        }
    }).draw();





    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [1,2,4,8],
            [8,6,5,2]
        ],
        options: {
            marginLeft: 65,
            backgroundGrid: false,
            spline: true,
            linewidth: 3,
            tickmarksStyle: 'filledcircle',
            tickmarksSize: 7,
            colors: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            xaxisLabels: ['2020','2030','2040','2050'],
            tooltips: '%{property:xaxisLabels[%{index}]}',
            tooltipsCss: {
                fontWeight:      'bold'
            },
            yaxis: false,
            yaxisScale: false,
            xaxis: false,
            marginInner: 70
        }
    }).draw();
</script>

Bubble chart

And finally - the Bubble chart (which is actually a variation on the Scatter chart). Bubble charts can be used to visualise three bits of data - the x-axis value, the y-axis value, and the size of the bubble. If you only have two bits of data you would probably be better off with a regular Scatter chart. You can see the format of the data that you should pass - it's an array of datasets and each dataset is an array of objects - and those objects represent each point. In this object, you can configure the x/y/z values, the tooltip (if required) and the color. 

<script>
    dataset = [
        {x: 30, y: 5, z: 10, color: 'black'},
        {x: 60, y: 8, z: 8, color: 'red'},
        {x: 90, y: 2, z: 3, color: 'red'},
        {x: 120, y: 5, z: 5, color: 'black'},
        {x: 150, y: 3, z: 6, color: 'black'},
        {x: 180, y: 8, z: 1, color: 'red'},
        {x: 210, y: 9, z: 2, color: 'black'},
        {x: 240, y: 4, z: 8, color: 'red'}
    ];

    new RGraph.SVG.Scatter({
        id: 'chart-container',
        data: [dataset],
        options: {
            marginTop: 55,
            xaxisScaleMax: 365,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            bubble: true,
            bubbleMaxValue: 10,
            bubbleMaxRadius: 50,
            bubbleColorsSolid: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            xaxis: false,
            colors: ['blue', 'red'],
            title: 'A Bubble chart',
            key: ['Frankie','Johnnie'],
            keyColors: ['Red','black']
        }
    }).draw();
</script>

Where to go from here?

So now you have 10 examples of charts that you can take and perhaps use in your own pages. Oh and don't forget the hundreds of examples that are bundled with RGraph that you can use too!

These examples use the svg libraries - so don't forget that there are an awful lot of canvas demos that are available too.