Read about the dynamically adjustable charts

About

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

Version 7.01 released

Version 7.01 (released in October 2025) is the latest version of RGraph and now includes a new tree structure object. The accompanying Treemenu object can then turn the object into a fully dynamic tree menu. You can read the API documentation for the tree on the main API documentation page and see an example of the Treemenu feature by following this link...

New HTML datagrid

In the April 2025 (v6.21) release a new datagrid object was added. This makes it easy to add static or dynamic data tables to your pages. It can be used whether you use the canvas or SVG libraries or entirely standalone.

Download

Get the latest version of RGraph (version 7.01, 8th October 2025) 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.

The adjustable events
Adjustable chart types:
Activity meter
Bar chart
Fuel chart
Gantt chart
Gauge chart
Horizontal Bar chart
Horseshoe meter
Horizontal Progress bar
Line chart
Meter chart
Odometer chart
Scatter chart
Segmented donut chart
Semi-circular Progress bar
Thermometer chart
Vertical Progress bar

You have the ability with some chart types to adjust your charts interactively. Currently, the charts listed here have this ability. Some chart types use multiple event listeners and as such are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work with the context menu, it is unlikely to work with other dynamic features.

The adjustable events

adjustbegin
adjust
adjustend

These three RGraph events are associated with adjusting. The adjustbegin event fires when adjusting begins. Much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.

Activity meter

The Activity meter adjusting can be seen in the activity-adjustable.html demo in the download archive.

<script>
    adjusting = new RGraph.Activity ({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [23,45,55],
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Bar chart

The Bar chart adjusting can be seen in the activity-adjustable.html and bar-adjustable-limited.html demos in the download archive.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,14,12,13,10,16],
        options: {
            colors: ['red'],
            marginInner: 5,
            yaxis: false,
            yaxisScaleunitsPost: '%',
            yaxisScaleMax: 100,
            marginLeft: 45,
            title: 'An adjustable Bar chart',
            shadow: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Fuel chart

The Fuel chart adjusting can be seen in the fuel-interactive.html demo in the download archive.

<script>
    fuel = new RGraph.Fuel({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Gantt chart

The Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the right edge of the event. To get the details of the bar being dragged you can use the adjust or adjustend events and inside the event handler, you can look at the RGraph registry - RGraph.Registry.get('adjusting.gantt') The returned array consists of:

index - The numerical index of the event being adjusted (corresponding to the data array that you set in the constructor).
object - The Gantt chart object
shape - The pertinent shape information
mousex - The mouse X coordinate when adjusting began
mousey - The mouse Y coordinate when adjusting began
event_duration - The size of the event (when adjusting was commenced)
mode - This can be either move or resize indicating what was done to the bar.

When adjusting is complete the obj.data array is updated. So you can use the numerical index that you find in the registry (as above) with the obj.data array to get up-to-date event information.

The Gantt chart adjusting can be seen in the gantt-adjustable.html gantt-adjustable2.html gantt-adjustable-limited.html demos in the download archive.

<script>
    gantt_events = [
        {start: 31, duration: 28,  label:'Richard'},
        {start: 0,  duration: 120, label:'Bob'},
        {start: 84, duration: 16,  label:'Fred'},
        {start: 35, duration: 45,  label:'Charles'},
        {start: 0,  duration: 35,  label:'Kev'},
        {start: 0,  duration: 28,  label:'Wayne'},
        {start: 31, duration: 28,  label:'John'}
    ];

    gantt = new RGraph.Gantt({
        id: 'cvs',
        data: gantt_events,
        options: {
            xaxisScaleMax: 120,
            backgroundGridVlinesCount: 4,
            borders: false,
            colorsDefault: '#0c0',
            xaxisLabels: ['January', 'February', 'March', 'April'],
            title: 'An adjustable Gantt chart'
            backgroundVbars: [
                [0, 31, 'rgba(230,230,230,0.4)'],
                [59, 31, 'rgba(230,230,230,0.4)']
            ],
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj)
                {
                    var events = obj.data;
                    var conf   = RGraph.Registry.get('adjusting.gantt');
            
            
                    if (conf) {
                        
                        var index = conf.dataset;
            
                        document.getElementById("eventID").value       = index;
                        document.getElementById("eventStart").value    = events[index].start;
                        document.getElementById("eventDuration").value = events[index].duration;
                        
                        console.log('Event ID: ' + index + ', Event start: ' + events[index].start + ' Event duration: ' + events[index].duration);
                    }
                },
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Gauge chart

The Gauge chart adjusting can be seen in the gauge-adjustable.html demo in the download archive.

<script>
    gauge = new RGraph.Gauge({
        id: 'cvs',
        min:0,
        max:100,
        value:78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Horizontal bar chart

The Horizontal bar chart adjusting can be seen in the hbar-adjustable.html hbar-adjustable-limited.html demos in the download archive.

<script>
    new RGraph.HBar({
        id: 'cvs',
        data: [4,8,6,3,5,2,6],
        options: {
            yaxisLabels: ['Richard','Ben','Larry','Pete','Luis','John','Fred'],
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Horizontal progress bar

The Horizontal progress bar adjusting can be seen in the hprogress-grow.html demo in the download archive.

<script>
    hprogress = new RGraph.HProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            marginBottom: 30,
            colors: ['Gradient(white:red)'],
            margin: 10,
            tickmarksInner: true,
            tickmarksZerostart: true,
            scaleUnitsPost: '%',
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Horseshoe meter

The Horseshoe meter adjusting can be seen in the horseshoe-adjustable.html demo in the download archive.

<script>
    horseshoe = new RGraph.Horseshoe({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Line chart

Note If you don't like the line being drawn outside of the chart area (ie in the margins where the title or the labels are) you can use the outofboundsClip option.

The Line chart can be adjusted by dragging the line(s) up and down. When you click on a line to adjust it (and hold the mouse button down) you can then retrieve the relevant details of that point from the registry:

RGraph.Registry.get('adjusting.shape');

The Line chart adjusting can be seen in the line-adjustable-limited.html line-adjustable-onetouch.html line-adjustable-range.html line-adjustable-touch-event.html line-adjustable.html demos in the download archive.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [
            [45,74,84,85,45,35,65,68,87,97,45,34,12],
            [15,14,12,16,18,19,14,12,74,84,95,65,35]
        ],
        options: {
            xaxisLabels: ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob'],
            linewidth: 2,
            marginInner: 10,
            shadow: false,
            title: 'An adjustable line chart',
            outofbounds: true,
            spline: true,
            tickmarksStyle: 'circle',
            tickmarksSize: 5,
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Meter chart

The Meter chart adjusting can be seen in the meter-adjustable.html demos in the download archive.

<script>
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Odometer chart

The Odometer chart adjusting can be seen in the odo-adjustable.html demos in the download archive.

<script>
    odo = new RGraph.Odometer({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Scatter chart

The Scatter chart adjusting can be seen in the scatter-adjustable.html demo in the download archive.

<script>
    data = [
        [21,0], [13,16],[8,10], [10,8], [18,18],[15,19],
        [13,16],[15,12],[16,13],[12,11],[10,18],[11,19],
        [7,17], [11,18],[9,13], [11,12],[12,10],[10,9],
        [19,10],[15,15]
    ];

    new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colorsDefault: 'red',
            tickmarksStyle: 'circle',
            tickmarksSize: 10,
            xaxisScaleMax: 31,
            xaxisLabelsOffsety: 3,
            xaxisLabels: [
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S'
            ],
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Segmented donut chart

The Segmented donut chart adjusting can be seen in the segmented-adjustable.html demo in the download archive.

<script>
    segmented = new RGraph.Segmented({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Semi-circular progress bar

The Semi-circular Progress bar adjusting can be seen in the semicircularprogress-adjustable.html demos in the download archive.

<script>
    scp = new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10,
            scaleUnitsPost: '%',
            colors: ['Gradient(white:#0a0)'],
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Thermometer chart

The Thermometer chart adjusting can be seen in the thermometer-adjustable.html demos in the download archive.

<script>
    new RGraph.Thermometer({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            marginBottom: 20,
            colors: ['Gradient(orange:white)'],
            titleSide: 'An adj. thermometer',
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Vertical progress bar

The Vertical Progress bar adjusting can be seen in the vprogress-grow.html demos in the download archive.

<script>
    new RGraph.VProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            colors: ['red'],
            marginInner: 15,
            tickmarksInner: true,
            labelInner: true,
            scaleUnitsPost: '%',
            marginRight: 55,
            adjustable: true,
            events: {
                adjustbegin: function (obj) {},
                adjust:      function (obj) {},
                adjustend:   function (obj) {}
            }
        }
    }).draw();
</script>

Adjustable charts

The adjustable events

Activity meter

Bar chart

Fuel chart

Gantt chart

Gauge chart

Horizontal bar chart

Horizontal progress bar

Horseshoe meter

Line chart

Meter chart

Odometer chart

Scatter chart

Segmented donut chart

Semi-circular progress bar

Thermometer chart

Vertical progress bar