RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

As we want xaxisTitle(lead source shown in image) below xaxis label completed so we are giving xaxixPos:0 it shows xaxisTitle below line and if we give xaxisPos:1 it shows in middle of the labels
I hope revert me with the solution

By the looks of it, you should have enough space so that you don't have to angle your X-axis labels - so you could remove that - and the xaxisTitlePos=1 should work OK.

Alternatively, if you wish to keep the angled labels you could use the xaxisTitleOffsety property to move the title.

This is probably happening because the text measuring gets a little thrown out because of the angled text.

Here's an example:

https://codepen.io/rgraph/full/LYmdmPz

Thanks Richard for your response as i tried given solution by you xaxisTitleOffsety to 40 but xaxisTitle is not shown as i want angled text for label

Try also setting the textAccessible option to true because it sounds like the text may be disappearing off the edge of the <canvas>.

Initially i was using textAccessible as true but it was disappearing labels of xaxis and y axis when i refresh chart so i have used textAccessible to false

Ok, well in that case then the edge of the canvas (which you can easily see by adding a CSS border to it) is the point at which labels will start disappearing.

In that case, you'll need to start increasing the bottom margin - for example:

...
marginBottom: 100
...

Here's an example:

https://codepen.io/rgraph/full/poVKzZW

Below code which we used for stacked bar chart:
new RGraph.Bar({
            id: '$chartId',
            data: $chartDataValues,
            options: {
                grouping:'$grouping',
                backgroundGrid:false,
                gutterBottom: 150,
                gutterTop:25,
                gutterLeft:128,
                colorsSequential:true,
                tooltips:$chartTooltips,
                tooltipsEvent:'onmousemove',
                tooltipsCssClass: 'rgraph_chart_tooltips_css',
                shadow:false,
                xaxisLabels: $chartLabelValues,
                yaxisTitle: '$y_name',
                yaxisTitleBold: true,
                titleSize: 14,
                titleX: 25,
                titleY: 20,
                title: '$chartName',
                titleHalign: 'left',
                xaxisTitle: '$x_name',
                xaxisTitleBold: true,
                xaxisTitlePos:0,
xaxisTitleOffsety: 20,
                textSize:10,
                textAngle:90,
                marginLeft: 50,
                marginTop: 50,
                marginBottom: 100,
                marginRight: 160,
                xaxisLabelsAngle:60,
                labelsAbove: true,
                key: $chartLegends,
                keyPosition:'graph',
                keyPositionX:$chartWidth-150,
                keyPositionY:150,
                colors: $this->colours,
        textAccessible: false,
                textAccessibleOverflow: false,
                textAccessiblePointerevents: false,
                ymax:calculateMaxYForSmallNumbers($chartDataValues)
            }
        }).grow({frames: 40});

You just need to play around with some of the values:

https://codepen.io/rgraph/full/poVKzZW

Richard Thanks for the help and solution as i tried with different values and it is working.