"transparent" or "" or "Transparent" do not work, result is solid white background This will only take a hex color string, will not accept an rgba string. I need a transparent background for all my charts.
function createChart() {
$("#detail-chart").kendoChart({
theme: "Material",
chartArea: {background:"transparent", height:300},
title: {
position: "top",
text: "Sales Percentage \n Per Market",
color: "#868686"
},
legend: {
visible: true,
position: "bottom",
labels: {
color: "#868686",
padding: {right:10,bottom:2},
margin: {right:14}
}
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Sales Percentage",
data: [40, 32, 61],
color: "#425968"
}, {
name: "Total Local Market",
data: [100, 100, 100],
color: "#c3c3c3"
}],
valueAxis: {
max: 100,
majorUnit: 50,
line: {visible: false},
minorGridLines: {visible: false},
labels: {
format:"{0:n0}%",
color: "#525252"
}
},
categoryAxis: {
categories: ["African American", "Hispanic", "Asian American"],
majorGridLines: {visible: false},
labels: {
color: "#525252"
}
},
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%",
font: "20px"
}
});
}
3 Answers, 1 is accepted
The "transparent" background is working as expected on my side. Could you please take a look at this dojo and let me know what I am missing?
Regards,
Iliana Nikolova
Telerik
Rank 1
Through trial and error I discovered that the chart requires this CSS style attached, otherwise the background is white:
.k-content {
background:none;
}
I do not see this css style applied on the dojo version. Wondering where the difference is.
The .k-content class is not related to Kendo UI Chart and I am not quite sure what causes the problem in your application. Please try removing all custom CSS and let me know if the same problem occurs.
Regards,
Iliana Nikolova
Telerik