Ingraph labels

• Example Line chart
• Example Bar chart
• Example Scatter chart
• Example bar chart (dot variant))

This page shows the various options for ingraph labels. Ingraph labels allow you to point out certain datapoints on your chart and add labels. The ingraph labels can be set like this:

obj.set({
    labelsIngraph: [,,'Hoolio',,'Olga']
});

If a simple string isn't enough for you then you can give an array of options for each label if you want more control.

obj.set({
    labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga']
});

The array can consist of:

• The label text
• The text color
• The background-color
• This can be 1 or -1 and denotes whether the label should be above or below the line. This has no effect on Bar or Scatter charts
• The length of the label pointer/arrow

Example Line chart

This example code produces a simple Line chart with two ingraph labels on it.

<script>
    new RGraph.Line({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            title: 'Line chart with ingraph labels',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga'],
            spline: true
        }
    }).draw();
</script>

Example Bar chart

This example code produces a simple Bar chart with two ingraph labels on it.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            colors: ['red'],
            title: 'Bar chart with ingraph labels',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga'],
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
</script>

Example Scatter chart

This example code produces a simple Scatter chart with three ingraph labels on it.

<script>
    new RGraph.Scatter({
        id: 'cvs',
        data: [
            [[5,15],[24,30],[27,3],[23, 5]], // First dataset
            [[4,12]]                         // Second dataset
        ],
        options: {
            title: 'Scatter chart with ingraph labels',
            xaxisLabels: ['W1','W2','W3','W4'],
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],'Olga','Fred'],
            xaxisScaleMax: 31,
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
</script>

Example bar chart (dot variant)

This example code produces another Bar chart - this time using the dot variant of the Bar chart.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,5,6,3,2,5,6,4,2,4,1],
        options: {
            colors: ['black'],
            title: 'Bar chart with ingraph labels (dot variant)',
            xaxisLabels: ['Jim','Gail','Hoolio','Kev','Olga','Jimmy','Paul','Jake','John','Fred', 'Jobe'],
            labelsIngraph: [6,['Foo', 'red', 'yellow', null, 75],3,'Bar'],
            variant: 'dot',
            labelsIngraph: [,,['Hoolio', 'red', 'yellow', -1, 60],,'Olga'],
            xaxis: false,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw();
</script>