Ingraph labels
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>