Print is not working for any chart in chrome

[Jayesh Goyani]

Hello,

I am not able to get background color in chart print in chrome.

Can you please try with below code snippet?

http://try.kendoui.com/dataviz/chart-basics/1

HTML

<a id="jayeshgoyani" class="MyCLass" >Click Here For print</a>
<div class="chart-wrapper">
                <div id="chart"></div>
            </div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

JS

  var blogComments = [ {
                        "blog": "My blog",
                        "day": "1",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "2",
                        "value": 7,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "3",
                        "value": 12,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "4",
                        "value": 15,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "5",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "6",
                        "value": 23,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "7",
                        "value": 12,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "8",
                        "value": 10,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "9",
                        "value": 17,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "10",
                        "value": 13,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "11",
                        "value": 14,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "12",
                        "value": 15,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "13",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "14",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "15",
                        "value": 23,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "16",
                        "value": 25,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "17",
                        "value": 21,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "18",
                        "value": 18,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "19",
                        "value": 17,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "20",
                        "value": 16,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "21",
                        "value": 11,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "22",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "23",
                        "value": 8,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "24",
                        "value": 5,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "25",
                        "value": 4,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "26",
                        "value": 1,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "27",
                        "value": 7,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "28",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "29",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "30",
                        "value": 6,
                        "userColor": "#ffd600"
                    } ];

                function createChart() {
                    $("#chart").kendoChart({
                        dataSource: {
                            data: blogComments
                        },
                        title: {
                            align: "left",
                            text: "Comments per day"
                        },
                        legend: {
                            visible: false
                        },
                        seriesDefaults: {
                            type: "column",
                            labels: {
                                visible: true,
                                background: "transparent"
                            }
                        },
                        series: [{
                            field: "value",
                            colorField: "userColor"
                        }],
                        valueAxis: {
                            max: 28,
                            majorGridLines: {
                                visible: false
                            },
                            visible: false
                        },
                        categoryAxis: {
                            field: "day",
                            majorGridLines: {
                                visible: false
                            },
                            line: {
                                visible: false
                            }
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });

                         $("#jayeshgoyani").bind("click", function(e) {
                            PerviousDate();
                        });

                    }, 400);
                });
function PerviousDate() {
    window.print();
}

CSS

.MyCLass
    {
        color:Red;
    }

Please check attached image for more information.

Thanks,
Jayesh Goyani

[Iliana Dyankova]

Hello Jayesh,

Please check this forum thread - it discusses the same issue and contains a possible solution. 

Regards,
Iliana Nikolova
Telerik

[Jayesh Goyani]

Hello Iliana,

Thanks a lot for this.

Thanks,
Jayesh Goyani