Home › Forums › Feature Requests & Feedback › Label Position in the middle of a stacked bar › Reply To: Label Position in the middle of a stacked bar
And another question: How could i display more than one chart on one site. I tried:
<div id="chart1" style="height: 100px; width: 300px;"> </div>
<div id="chart2" style="height: 100px; width: 300px;"> </div>
That is my Code. But it only shows the last div :( (only one chart)
<script type="text/javascript">
//Chart fuer Tore Start
window.onload = function () {
var chart = new CanvasJS.Chart("chart_tore",
{
creditText: "",
axisY:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
gridThickness:0,
},
axisX:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
labelFontSize:0,
},
title:{
//text: "Tore und dies unddas",
fontSize:20,
verticalAlign: "center",
horizontalAlign: "left",
},
toolTip: {
enabled:false,
},
data:[
{
indexLabel: "{y}",
indexLabelFontSize: 20,
indexLabelPlacement: "inside",
color: "#151515",
type: "stackedBar100",
dataPoints: [
{y: bartore_home, label: "Tore" },
]
},
{
indexLabel: "{y}",
indexLabelFontSize: 20,
indexLabelPlacement: "inside",
color: "#F2F2F2",
type: "stackedBar100",
dataPoints: [
{y: bartore_away, label: "Tore" },
]
},
]
});
chart.render();
}
//Chart fuer Tore Ende
//Chart fuer Gelb Start
window.onload = function () {
var chart = new CanvasJS.Chart("chart_gelb",
{
creditText: "",
axisY:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
gridThickness:0,
},
axisX:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
labelFontSize:0,
},
title:{
//text: "Tore und dies unddas",
fontSize:20,
verticalAlign: "center",
horizontalAlign: "left",
},
toolTip: {
enabled:false,
},
data:[
{
indexLabel: "{y}",
indexLabelFontSize: 20,
indexLabelPlacement: "inside",
color: "#151515",
type: "stackedBar100",
dataPoints: [
{y: bargelb_home, label: "Tore" },
]
},
{
indexLabel: "{y}",
indexLabelFontSize: 20,
indexLabelPlacement: "inside",
color: "#F2F2F2",
type: "stackedBar100",
dataPoints: [
{y: bargelb_away, label: "Tore" },
]
},
]
});
chart.render();
}
//Chart fuer Gelb Ende
</script>