[Solved] how to specify background image for plotarea of chart

[ramesh]

In kendo chart i have to apply some gradient image for plot area.can any one help ?

[Iliana Dyankova]

Hi Ramesh,

Basically, it is not possible to set an image as a background to the plotArea, but you could apply it to the <div id="chart">.
For example:

<div id="chart" style="background: center no-repeat url('someImage.png');"></div>

In addition, I believe our demos will be of help.

 

Kind regards,
Iliana Nikolova
the Telerik team

[David]

Hi, I just found a solution that worked for me with a slight addition to the answer above.
For completeness, set the chart-area to transparant (or less transparent using color+opaque).
Tip: for a resizable image, set the resize styling.

For example:

<div id="chart" style="background-image: url('.....png');background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;">
</div>
<script>
$("#chart").kendoChart({
  chartArea: {
    background: "transparent", //or color
    opacity: 0.1 //or opacity
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>