Thanks for the update. The zoomcharts ver 1.11.1 already solved the problems that I mentioned at above.
However, I discover another bug in which the stack function may conflicts with the value label when there are only 1 data at x-axis for every series and one of these is zero. The chart legend will disappear and the value label will failed to display on the chart. The value label may display sometimes when you move the mouse cursor on the chart column if at least one of the series is in "columns" type. If this chart consist of drill-down layer, then a blank chart will be shown after drill-down is performed (although it will show some values if we move the mouse cursor on the chart area)
Below is the sample scripts which can reflect this bug:
<script>
var data = {
subvalues: [
{
total: 160,
English: 100,
Biology: 0,
History: 60,
name: "StudentC"
}
]
};
var f = new FacetChart({
container: document.getElementById("demo"),
data: {
preloaded: data
},
stacks: {
default: {
type: "normal"
}
},
legend: {
enabled: true,
panel: {
align: "center",
side: "bottom"
}
},
series: [
{
name: "total",
data: {index: 1, field: "total"},
type: "columns",
valueLabels: {
enabled: true,
position: "outside",
style: {
textStyle: {
font: "12pt Arial"
},
backgroundStyle: {
lineColor: "#ccc",
lineWidth: 1,
fillColor: "rgba(200,200,200,0.5)"
},
borderRadius: 2
},
contentsFunction: function (value) { return value.toFixed(0);}
}
},
{
name: "English",
data: {index: 2, field: "English"},
type: "line",
stack: "default",
valueLabels: {
enabled: true,
position: "outside",
style: {
textStyle: {
font: "12pt Arial"
},
backgroundStyle: {
lineColor: "#ccc",
lineWidth: 1,
fillColor: "rgba(200,200,200,0.5)"
},
borderRadius: 2
},
contentsFunction: function (value) { return value.toFixed(0);}
}
},
{
name: "Biology",
data: {index: 3, field: "Biology"},
type: "line",
stack: "default",
valueLabels: {
enabled: true,
position: "outside",
style: {
textStyle: {
font: "12pt Arial"
},
backgroundStyle: {
lineColor: "#ccc",
lineWidth: 1,
fillColor: "rgba(200,200,200,0.5)"
},
borderRadius: 2
},
contentsFunction: function (value) { return value.toFixed(0);}
}
},
{
name: "History",
data: {index: 3, field: "History"},
type: "line",
stack: "default",
valueLabels: {
enabled: true,
position: "outside",
style: {
textStyle: {
font: "12pt Arial"
},
backgroundStyle: {
lineColor: "#ccc",
lineWidth: 1,
fillColor: "rgba(200,200,200,0.5)"
},
borderRadius: 2
},
contentsFunction: function (value) { return value.toFixed(0);}
}
}
]
});
</script>