Usage of background image for charts

With parameter "canvas_class" you set css styling options for the used canvas. With it you may set a background color or background image for your chart. You may define this via a style sheet or set it inline within your article: 
<style>
.cvs-euro {
    background-image: url('/media/plg_content_rgraph/images/euro.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;";
}
</style>

Parameter for creation of chart

{rgraph height="300" width="700" title="Cheapest vehicle costs upper class" type="Bar" variant="glass" data="Porsche Taycan 4S, Range Rover Sport P300, BMW X7 xDrive40d,Mercedes GLS 350, Porsche 911 Carrera, Mercedes G 350d, BMW 840i Gran Coupé, Lexus LC Coupé 500h, Porsche Panamera PDK, Lexus LS 500h/106.7,107.2,112.1,115.5,115.8,117.4,121.1,121.2,125.0,125.2" tooltipsFormattedDecimals="1"
canvas_class="cvs-euro" tooltip="<b style='padding: 10px;font-size: 15px'>#label#<br><span style='padding:15px'>#val# cent per Kilometer" yaxisScaleUnitsPost=" cent"  xaxisLabelsAngle="30" marginLeft="90" yaxisScaleMin="90" yaxisScaleDecimals="1" yaxisTitle="Cent pro Kilometer" chart_alignment="left" draw_option="draw()" }costs{/rgraph}

 

[No canvas support]>

Source: ADAC (November 2020)

 

Important: If you want to test this sample via copy/paste, ensure that you paste with option "paste as plain text" otherwise imbedded html-codes may invalidate your input.
go back...