Rgraph line chart spline creating ghost chart

Question

Trying to figure out what is happening here. When I first load the page with the graphs on it I get the following:

However after I refresh it I get the following:

here is the code that is being rendered:

    setTimeout(function(){  
                    new RGraph.SVG.Line({
                        id: 'sbfefinancialtrend2',
                        data: [
                                12.754546,  
                                18.771622, 
                                21.15946, 
                                6.198649, 
                                19.645947, 
                                13.724324, 
                                14.481081, 
                                6.0878377, 
                                22.671621, 
                                8.917568, 
                                14.263514, 
                                9.281081, 
                                20.340542, 
                                13.485135, 
                                5.727027, 
                                7.964865, 
                                7.1932435, 
                                4.8932433, 
                                8.136486, 
                                6.9445944, 
                                5.428378, 
                                7.268919, 
                                5.85, 
                                4.6, 
                                7.3581085, 
                                5.685135, 
                                9.606757, 
                                19.431429, 
                                11.982858, 
                                11.364285, 
                                1.9033333, 
                                8.645714, 
                                6.535714, 
                                          
                         ],      
                        options: {
                            backgroundGridLinewidth:0.5,
                            backgroundGridVlinesCount: 36,
                            marginInner: 0,
                            textColor: '#595959',
                            textFont: 'Roboto',
                            filled: true,
                            filledColors: ['rgba(219,193,218,0.7)'],
                            colors: ['#a30a7a'],
                            marginRight: 10,
                            marginBottom: 30,
                            marginTop: 10,
                            xaxis: false,
                            yaxis: false,
                            tickmarksFill: '#a30a7a',
                            tickmarksLinewidth: 1,
                            linewidth: 1,
                            spline: true
                        }
                    }).trace().responsive([ 
                        {width: 750,height:130,options: 
                        {xaxisLabels: [
                            'F20',                                       
                            'J20',                                       
                            'D19',                                       
                            'N19',                                       
                            'O19',                                       
                            'S19',                                       
                            'A19',                                       
                            'J19',                                       
                            'J19',                                       
                            'M19',                                       
                            'A19',                                       
                            'M19',                                       
                            'F19',                                       
                            'J19',                                       
                            'D18',                                       
                            'N18',                                       
                            'O18',                                       
                            'S18',                                       
                            'A18',                                       
                            'J18',                                       
                            'J18',                                       
                            'M18',                                       
                            'A18',                                       
                            'M18',                                       
                            'F18',                                       
                            'J18',                                       
                            'D17',                                       
                            'N17',                                       
                            'O17',                                       
                            'S17',                                       
                            'A17',                                       
                            'J17',                                       
                            'J17',                                       
                        ],
                        xaxisLabelsAngle:45,marginLeft: 30,textSize: 8,tickmarksStyle: 'circle',tickmarksSize: 3,linewidth: 2},
                        css:{'float':'right'}}
                    ]);},1000); 

I wrapped it with a timeout in order to try to fix the problem. However this didn't help.

Any suggestions?

Thanks for you help!

Answer 1

Your code works for me on my test page. You can see that here:

https://www.rgraph.net/tests/svg.line/natdrip.html

Though you could try adding this to your code:

.on('beforedraw', function ()
{
    RGraph.SVG.clear('cc');
}).trace()