One more Thing. The Tooltip gets displayed outside of the diagram on the top of the Bar's.
Here is my Sample Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Diagramm</title>
<link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css" rel="Stylesheet" id="jqTheme"/>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.vectorTemplates.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.ui.js"></script>
</head>
<body>
<div id="jChartFxDiv" style="width: 600px; height: 390px; display: inline-block"></div>
<SCRIPT type="text/javascript">
window.onload = function () {
onLoadDoc();
};
var chart1;
function onLoadDoc() {
chart1 = new cfx.Chart();
chart1.getAnimations().getLoad().setEnabled(true);
var items = [
{
"Year": "2010",
"Filiale01":114528,
"Filiale02":66272,
"Filiale03":25226,
"Filiale04":0,
"Aberration_Filiale01":100,
"Aberration_Filiale02":100,
"Aberration_Filiale03":100,
"Aberration_Filiale04":0
},
{
"Year": "2011",
"Filiale01":115441,
"Filiale02":71197,
"Filiale03":25743,
"Filiale04":174335,
"Aberration_Filiale01":1,
"Aberration_Filiale02":7,
"Aberration_Filiale03":2,
"Aberration_Filiale04":100
},
{
"Year": "2012",
"Filiale01":112408,
"Filiale02":74570,
"Filiale03":27946,
"Filiale04":173099,
"Aberration_Filiale01":-3,
"Aberration_Filiale02":5,
"Aberration_Filiale03":8,
"Aberration_Filiale04":-1
},
{
"Year": "2013",
"Filiale01":110910,
"Filiale02":76602,
"Filiale03":28132,
"Filiale04":173455,
"Aberration_Filiale01":-1,
"Aberration_Filiale02":3,
"Aberration_Filiale03":1,
"Aberration_Filiale04":0
},
{
"Year": "2014",
"Filiale01":2628,
"Filiale02":1944,
"Filiale03":543,
"Filiale04":3742,
"Aberration_Filiale01":-4120,
"Aberration_Filiale02":-3840,
"Aberration_Filiale03":-5081,
"Aberration_Filiale04":-4535
}];
document.title='Order-Positions';
chart1.setDataSource(items);
chart1.setGallery(cfx.Gallery.Bar);
var bar = chart1.getGalleryAttributes();
bar.setTemplate("BarGlass");
var title = new cfx.TitleDockable();
title.setText("Monat");
var axisX = chart1.getAxisX();
axisX.setTitle(title);
axisX.setStep(1);
axisX.setLabelAngle(90);
chart1.getSeries().getItem(1).setStacked(true);
chart1.getSeries().getItem(2).setStacked(true);
chart1.getSeries().getItem(3).setStacked(true);
chart1.getSeries().getItem(4).setVisible(false);
chart1.getSeries().getItem(5).setVisible(false);
chart1.getSeries().getItem(6).setVisible(false);
chart1.getSeries().getItem(7).setVisible(false);
chart1.getToolTips().setAllSeries(false);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
chart1.getToolTips().setContentTemplate('<DataTemplate xmlns:x="a"><DockPanel Orientation="Vertical"><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale01" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale01}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale01:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale01}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale02" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale02}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale02:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale02}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale03:" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale03}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale03:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale03}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Filiale04" Foreground="{Binding Path=ItemFill}" M="0,0,4,0"/><TextBlock Text="{Binding Path=DataFiliale04}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel><DockPanel Orientation="Horizontal" Margin="3,0,3,0"><TextBlock Text="Aberration_Filiale04:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/><TextBlock Text="{Binding Path=DataAberration_Filiale04}" FontWeight="Bold" HorizontalAlignment="Right"/></DockPanel></DockPanel></DataTemplate>');
var chartDiv = document.getElementById('jChartFxDiv');
chart1.create(chartDiv);
chart1.getAxisY().resetScale();
chart1.recalculateScale();
};
</script>
</body>
</html>