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 (£129) commercial license available.

More »

Issue with the Pie chart and it's labels

Posted by Vishal shukla at 16:06 on Wednesday 16th June 2021 [link]
Sir actually I am making a pai chart it's labels actually outside I wants it inside the pai chart so how I can done this please let me know as soon as possible you can see the my code just given below.
function ProductModel() {

            url: '/Home/ProductModelForGraph' , callback: function (json) {
                var Ids1 = [];
                var IDs = [];
                var IDs2 = [];
                $(json.getData).each(function (index, value1) {
                    Ids1.push([this.ModelName, this.BomId ]);
                var colors = ['#45B39D', '#9bccf2', '#034f84', '#8044C1', '#2999CD', '#C8C02A', '#36C461', '#36C49F'];
                var key = RGraph.HTML.Key('container',
                        colors: colors,
                        labels: Ids1,

                        tableCss: {
                            position: 'absolute',
                            top: '50%',
                            right: '-575px',
                            transform: 'translateY(-50%)',
                            colors: colors
                new RGraph.Pie({
                    id: 'ProductModelGraph',
                    data: IDs,
                    options: {
                        vv: IDs2,
                        marginLeft: 20,
                        title: 'Product Model Wise Costing Count',
                        titleSize: 20,
                        labelsColor: '#0095cd',
                        titleBold: true,
                        marginRight: 50,
                        linewidth: 0,
                        colorsStroke: 'rgba(0,0,0,0)',
                        colors: colors,
                        variant: 'donut3d',
                        radius: 100,
                        radius: 80,
                        shadowOffsety: 4,
                        shadowOffsetx: 5,
                        shadowColor: '#aaa',
                        exploded: [5, 5, 5],
                        titleColor: '#0095cd',
                        textSize: 20,
                        tooltips: '<span style="font-size: 14pt;">%{property:vv[%{index}]}: %{value}</span>',
                        tooltipsFormattedKeyColors: ['#aaf', 'green'],
                        tooltipsPointer: false,
                        tooltipsPositionStatic: false,
                        tooltipsEvent: 'mousemove',
                        tooltipsCss: {
                            fontFamily: 'Verdana',
                            fontSize: '20pt',
                            color: 'white',
                            border: 'groove',
                            //backgroundColor: '#0095cd',

                RGraph.tooltips.style.backgroundColor = '%{property:colors[%{index}]}';



Posted by Richard at 18:08 on Wednesday 16th June 2021 [link]
Since you're using a 3D Pie/Donut chart maybe this would suit you:


If not then maybe setting the labels to be native canvas text with the textAccessible option (set it to false) and the labelsIngraph* options may be useful.

[Replies are now closed]