MENU
.net Powerful JavaScript charts

How to 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.

Example

Here's the resulting Line chart with undulating labels that follow the gradients of the line.

[No canvas support]

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: {
            xaxisLabels: ['Bob','Fred','John','Luis','Jo','Kane','Lou','Pob','Angie', 'Jim'],
            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
        }
    }).draw();
</script>

 

A version of the chart that uses the adjustable feature

[No canvas support]

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