HOWTO: Get angled labels

• Example
• Description
• A version of the chart that uses the adjustable feature

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,
            scaled: true,

            // 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',
            scaled: true,
            adjustable: true,
            labelsAngled: ['Up','Down','Level'],
            labelsAngledSize: 12,
            yaxisScaleMax: 10
        }
    }).draw();
</script>