Hello,
I'm working on styling a stacked bar chart and I want the chart to always take up 100% of it's containers height no matter what the data values are. I will be binding local json data to this chart so obviously the values will change. I wasn't sure if there was a way to set the valueAxis max property to do this? Any help is appreciated!
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.default.min.css">
</head>
<body>
<div id="example" class="k-content" >
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<script src="../JavaScriptLib/jquery/main.js"></script>
<script src="../JavaScriptLib/kendo/kendo.all.min.js"></script>
<script>
function createChart() {
$("#chart").kendoChart({
chartArea: {
background:"",
height:180,
width:70
},
legend: {
visible: false,
},
seriesDefaults: {
type: "column",
stack: true,
gap:0
},
series: [{
name: "Interest",
stack: "Mortgage",
data: [494.50],
color: "#f58025"
}, {
name: "Taxes",
stack: "Mortgage",
data: [375],
color: "#f58025"
}, {
name: "Principle",
stack: "Mortgage",
data: [269],
color: "#f58025"
}, {
name: "PMI",
stack: "Mortgage",
data: [200],
color: "#f58025"
}, {
name: "Rollover",
stack: "Mortgage",
data: [75],
color: "#f58025"
}, {
name: "Insurance",
stack: "Mortgage",
data: [50],
color: "#f58025"
}],
valueAxis: {
max:1450,
color:"#ff0000",
labels:{
color:""
},
labels:{
visible:false
},
line: {
visible: false
},
majorGridLines: {
visible: false
},
},
categoryAxis: {
color:"",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= ['$']+value #"
}
});
}
$(document).ready(function(){
$('#LoanActivityTable').dataTable();
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();
$("#example").bind("kendo:skinChange", function(e) {
chart.options.series[0].color = chart.options.series[0].data[0].color;
createChart();
});
}, 400);
});
</script>
</body>
</html>
I'm working on styling a stacked bar chart and I want the chart to always take up 100% of it's containers height no matter what the data values are. I will be binding local json data to this chart so obviously the values will change. I wasn't sure if there was a way to set the valueAxis max property to do this? Any help is appreciated!
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="../css/kendo/kendo.default.min.css">
</head>
<body>
<div id="example" class="k-content" >
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<script src="../JavaScriptLib/jquery/main.js"></script>
<script src="../JavaScriptLib/kendo/kendo.all.min.js"></script>
<script>
function createChart() {
$("#chart").kendoChart({
chartArea: {
background:"",
height:180,
width:70
},
legend: {
visible: false,
},
seriesDefaults: {
type: "column",
stack: true,
gap:0
},
series: [{
name: "Interest",
stack: "Mortgage",
data: [494.50],
color: "#f58025"
}, {
name: "Taxes",
stack: "Mortgage",
data: [375],
color: "#f58025"
}, {
name: "Principle",
stack: "Mortgage",
data: [269],
color: "#f58025"
}, {
name: "PMI",
stack: "Mortgage",
data: [200],
color: "#f58025"
}, {
name: "Rollover",
stack: "Mortgage",
data: [75],
color: "#f58025"
}, {
name: "Insurance",
stack: "Mortgage",
data: [50],
color: "#f58025"
}],
valueAxis: {
max:1450,
color:"#ff0000",
labels:{
color:""
},
labels:{
visible:false
},
line: {
visible: false
},
majorGridLines: {
visible: false
},
},
categoryAxis: {
color:"",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= ['$']+value #"
}
});
}
$(document).ready(function(){
$('#LoanActivityTable').dataTable();
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();
$("#example").bind("kendo:skinChange", function(e) {
chart.options.series[0].color = chart.options.series[0].data[0].color;
createChart();
});
}, 400);
});
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Randy,
Iliana Nikolova
Telerik
I am afraid there is no a built-in option for your scenario in Kendo UI Chart. As a possible workaround I can suggest you changing the valueAxis.max value via chart.options and refresh the chart. For example:
//get reference to the chart widgetvar chart = $("#chart").data("kendoChart");//get the chart optionvar chartOptions = chart.options;//set new valueAxis.maxchartOptions.valueAxis.max = 1000;//refresh the chartchart.refresh();Let me know if this fits your requirements.
Regards,Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!