HOWTO: Get angled labels

A guide for creating a Line chart that has angled labels that follow the shape of the line. Previously these labels were added to the chart using the ondraw event but they're now part of the Line chart and can be added much more easily using the labelsAngled* properties.

• A version of the chart that uses the adjustable feature

[No canvas support]

This is a demonstration that shows you a Line chart that has the labelsAngled feature enabled that 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 achieve the chart above.

<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,
            title: 'A chart with undulating labels',
            titleBold: 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
        }
    }).draw();
</script>

 

A version of the chart that uses the adjustable feature

[No canvas support]

This is an adjustable version of the above 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: 'cvs2',
        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: 20,
            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>