Bar charts Line charts and Pie charts


Bar charts

  • Standard bar charts
  • Stacked (normal and 100%) bar charts
  • Grouped bar charts
  • Floating bar charts
  • Combined bar and line charts
  • 3D and sketch bar charts
  • Background images
  • Tooltips, interactive keys, adjusting, annotation, zoom, resizing, context menus and custom event listeners
  • Errorbars
  • Visual effects
Animate...


[No canvas support]

Bar charts documentation
<script>
    var bar = new RGraph.Bar({
        id: 'cvs1',
        data: [[3,4,6],[2,5,3],[1,5,2],[1,4,6],[1,6,8]],
        options: {
            labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim'],
            colors: ['Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#fe783e:#EC561B:#F59F7D)'],
            hmargin: 14,
            strokestyle: 'rgba(0,0,0,0)',
            shadow: false,
            clearto: 'white',
            variant: '3d',
            gutterBottom: 80,
            strokestyle: 'rgba(0,0,0,0)',
            noaxes: true,
            textAccessible: true,
            unitsPost: 'Kg',
            scaleZerostart: true
        }
    }).draw();
</script>

Line charts

  • 100% area charts
  • Accumulatively stacked (and not) area charts
  • Smoothed Line charts (Splines)
  • Stepped Line charts
  • Custom tickmarks
  • Logarithmic charts
  • Inverted axes
  • Null values (gaps in the data series)
  • Multiple lines
  • Visual effects
Animate...
[No canvas support]
Line charts documentation
<script>
    var line = new RGraph.Line({
        id: 'cvs2',
        data: [8,9,15,16,21,23, 14, 4,13,19,18,11],
        options: {
            numxticks: 11,
            numyticks: 5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['red'],
            linewidth: 2,
            gutterLeft: 40,
            gutterRight: 20,
            gutterBottom: 50,
            labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            shadow: false,
            noxaxis: true,
            spline: true,
            hmargin: 5,
            clearto: 'white',
            textSize: 16,
            textAccessible: true,
            tickmarks: function (obj, data, value, index, x, y, color, prevX, prevY)
            {
                var co = obj.context,
                    ra = 4;
                
                // Clear a white space
                RGraph.path2(co, ['b', 'a', x, y, ra+6, 0, 6.28, false, 'f', 'white']);

                // Draw the center of the tickmark
                RGraph.path2(co,['b', 'a', x, y, ra, 0, 6.28, false, 'c', 'f', '#f00']);
                
                // Draw the outer ring
                RGraph.path2(co, ['b', 'a', x, y, ra + 1, 0, 6.28, false]);
                RGraph.path2(co, ['a', x, y, ra+5, 6.28, 0, true, 'c', 'f', 'rgba(255,200,200,0.5)']);
            }
        }
    }).trace2({frames: 60});
</script>

Pie/donut charts

  • Custom positioning
  • Segment separation
  • Tooltips, keys, zoom, resizing, context menus, annotations and custom events
  • Visual effects
  • 3D variant
  • Donut chart variations
[No canvas support]

Pie charts documentation
<script>
    var pie = new RGraph.Pie({
        id: 'cvs3',
        data: [4,8,6,3,5,2],
        options: {
            shadow: true,
            shadowOffsety: 7,
            shadowBlur: 25,
            strokestyle: 'rgba(0,0,0,0)',
            labels: ['Henning','Louis','John','Pete','Lucy','Fred'],
            clearto: 'white',
            variant: 'donut3d',
            labelsSticks: true,
            labelsSticksLength:25,
            radius: 100
        }
    }).draw();
</script>

Bipolar charts

  • Tooltips, annotation, zoom, resizing, context menus and custom event listeners
  • Compare datasets side-by-side
  • Visual effects
Animate...


[No canvas support]

Bipolar charts documentation
<script>
    var bipolar = new RGraph.Bipolar({
        id: 'cvs4',
        left: [4,8,6,3,5,2,4],
        right: [9,5,6,7,8,7,8],
        options: {
            gutterLeft: 40,
            gutterRight: 15,
            gutterCenter: 90,
            gutterBottom: 90,
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            colors: ['Gradient(blue:#aaf:blue)'],
            strokestyle: 'white',
            linewidth: 2,
            gutterCenter: 120,
            variant: '3d',
            axisColor: 'rgba(0,0,0,0)',
            textAccessible: true,
            scaleZerostart: true
        }
    }).grow();
</script>

Horizontal Bar charts

  • Standard HBar charts
  • Stacked HBar charts
  • Grouped HBar charts
  • Tooltips, interactive keys, annotation, zoom, resizing, context menus and custom event listeners
  • Visual effects
Animate...



[No canvas support]

Horizontal Bar charts documentation
<script>
    var hbar = new RGraph.HBar({
        id: 'cvs5',
        data: [4,8,-6,-3,2,-1,5,6],
        options: {
            textAccessible: true,
            colors: ['Gradient(red:red:rgb(255,224,224):red:red)'],
            labels: ['Fred','Lucy','Carl','Olga','Pete','Jill','Kevin','Gary'],
            yaxispos: 'center',
            gutterLeft: 60,
            gutterRight: 15,
            gutterBottom: 35,
            shadow: true,
            shadowColor: '#bbb',
            vmargin: 4,
            backgroundGridAutofitNumhlines: 8,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            noxaxis: true,
            textSize: 16,
            textColor: '#666',
            clearto: 'white'
        }
    }).grow();
</script>