HOWTO: Get angled labels
Example
Here's the resulting Line chart with
undulating labels that follow the gradients of the line.
Description
This is a demonstration (there's also a demo in
the download archive
called line-undulating.html) that shows you
a Line chart that has
the labelsAngled feature enabled which adds labels
to the line that follow the undulations of your line up and
down.
Previously, this was done with some custom code that was
run via the draw event.
As of the December
2021 release though, it has been added to the RGraph library
so all you now have to do is enable the
labelsAngled property. There are 22 other
labelsAngled properties (which can be seen on
the Line chart reference page
) that allow you to
customise the look of the text.
This is the code to create an example chart.
<script>
new RGraph.Line({
id: 'cvs',
data: [1,9,5,6,3,4,8,5,2,2],
options: {
xaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: ['Bob','Fred','John','Luis','Jo','Kane','Lou','Pob','Angie', 'Jim'],
tickmarksSize: 7,
tickmarksStyle: 'circle',
marginInner: 15,
textSize: 14,
marginLeft: 50,
marginTop: 15,
marginRight: 5,
// Three labels: one for up sections, one for down sections and one for level sections
// There's also a labelsAngledSpecific property which allows you to specify the exact labels.
labelsAngled:['Good','Bad','OK'],
labelsAngledSize: 12,
labelsAngledAccessible: false
}
}).draw();
</script>
A version of the chart that uses the adjustable feature
This is an adjustable version of the example chart. You can add
adjusting
by simply adding two properties to the chart configuration -
adjustable and yaxisScaleMax. The
adjustable property adds the adjusting feature
and the
yaxisScaleMax property stops the scale from
changing (when you move all of the points
downwards the top value of the scale will change accordingly).
<script>
new RGraph.Line({
id: 'cvs',
data: [1,9,5,6,3,4,8,5,2,2],
options: {
shadow: false,
xaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: ['Bob','Fred','John','Luis','Jo','Kane','Lou','Pob','Angie', 'Jim'],
tickmarksSize: 7,
marginInner: 15,
textSize: 14,
marginLeft: 50,
title: 'An adjustable version of the chart',
tickmarksStyle: 'circle',
// Add the adjusting feature
adjustable: true,
labelsAngled: ['Up','Down','Level'],
labelsAngledSize: 12,
yaxisScaleMax: 10
}
}).draw();
</script>