diff --git a/Modules/Chart/include/QmitkChartData.h b/Modules/Chart/include/QmitkChartData.h
index 350e6604c1..90f7d663ac 100644
--- a/Modules/Chart/include/QmitkChartData.h
+++ b/Modules/Chart/include/QmitkChartData.h
@@ -1,104 +1,104 @@
 /*===================================================================
 
 The Medical Imaging Interaction Toolkit (MITK)
 
 Copyright (c) German Cancer Research Center,
 Division of Medical and Biological Informatics.
 All rights reserved.
 
 This software is distributed WITHOUT ANY WARRANTY; without
 even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.
 
 See LICENSE.txt or http://www.mitk.org for details.
 
 ===================================================================*/
 
 #ifndef QmitkC3Data_h
 #define QmitkC3Data_h
 
 #include <QmitkChartWidget.h>
 #include <QVariant>
 
 /** \brief This class holds the relevant properties for the chart generation with C3 such as labels and diagram type.
 * It is derived from QObject, because we need Q_PROPERTIES to send Data via QWebChannel to JavaScript.
 * \sa The actual data for the chart generation is in QmitkC3xyData!
 */
 class QmitkChartData : public QObject
 {
   Q_OBJECT
 
   Q_PROPERTY(QVariant m_xAxisLabel READ GetXAxisLabel WRITE SetXAxisLabel NOTIFY SignalXAxisLabelChanged);
   Q_PROPERTY(QVariant m_yAxisLabel READ GetYAxisLabel WRITE SetYAxisLabel NOTIFY SignalYAxisLabelChanged);
   Q_PROPERTY(QVariant m_chartTitle READ GetTitle WRITE SetTitle NOTIFY SignalTitleChanged);
   Q_PROPERTY(QVariant m_LegendPosition READ GetLegendPosition WRITE SetLegendPosition NOTIFY SignalLegendPositionChanged);
   Q_PROPERTY(QVariant m_ShowLegend READ GetShowLegend WRITE SetShowLegend NOTIFY SignalShowLegendChanged);
   Q_PROPERTY(QVariant m_YAxisScale READ GetYAxisScale WRITE SetYAxisScale NOTIFY SignalYAxisScaleChanged);
   Q_PROPERTY(QVariant m_ShowSubchart READ GetShowSubchart WRITE SetShowSubchart NOTIFY SignalShowSubchartChanged);
   Q_PROPERTY(QVariant m_UsePercentageInPieChart READ GetUsePercentageInPieChart WRITE SetUsePercentageInPieChart NOTIFY SignalUsePercentageInPieChartChanged);
   Q_PROPERTY(QVariant m_DataPointSize READ GetDataPointSize WRITE SetDataPointSize NOTIFY SignalDataPointSizeChanged);
   Q_PROPERTY(QVariant m_StackedData READ GetStackedData WRITE SetStackedData NOTIFY SignalStackedDataChanged);
 
 public:
   QmitkChartData();
 
   void SetAppearance(bool showSubChart = true, bool usePercentageInPieChart = false);
 
   Q_INVOKABLE QVariant GetXAxisLabel() const { return m_xAxisLabel; };
   Q_INVOKABLE void SetXAxisLabel(const QVariant& label) { m_xAxisLabel = label; emit SignalXAxisLabelChanged(label); };
 
   Q_INVOKABLE QVariant GetYAxisLabel() const { return m_yAxisLabel; };
   Q_INVOKABLE void SetYAxisLabel(const QVariant& label) { m_yAxisLabel = label; emit SignalYAxisLabelChanged(label); };
 
   Q_INVOKABLE QVariant GetTitle() const { return m_chartTitle; };
   Q_INVOKABLE void SetTitle(const QVariant& title) { m_chartTitle = title; emit SignalTitleChanged(title); };
 
   Q_INVOKABLE QVariant GetLegendPosition() const { return m_LegendPosition; };
   Q_INVOKABLE void SetLegendPosition(const QVariant& legendPosition) { m_LegendPosition = legendPosition; emit SignalLegendPositionChanged(legendPosition); };
 
   Q_INVOKABLE QVariant GetShowLegend() const { return m_ShowLegend; };
   Q_INVOKABLE void SetShowLegend(const QVariant& show) { m_ShowLegend = show; emit SignalShowLegendChanged(show); };
 
   Q_INVOKABLE QVariant GetYAxisScale() const { return m_YAxisScale; };
   Q_INVOKABLE void SetYAxisScale(const QVariant& YAxisScale) { m_YAxisScale = YAxisScale; emit SignalYAxisScaleChanged(YAxisScale); };
 
   Q_INVOKABLE QVariant GetShowSubchart() const { return m_ShowSubchart; };
   Q_INVOKABLE void SetShowSubchart(const QVariant& showSubchart) { m_ShowSubchart = showSubchart; emit SignalShowSubchartChanged(showSubchart); };
 
   Q_INVOKABLE QVariant GetUsePercentageInPieChart() const { return m_UsePercentageInPieChart; };
   Q_INVOKABLE void SetUsePercentageInPieChart(const QVariant& usePercentageInPieChart) { m_UsePercentageInPieChart = usePercentageInPieChart; emit SignalUsePercentageInPieChartChanged(usePercentageInPieChart); };
 
   Q_INVOKABLE QVariant GetDataPointSize() const { return m_DataPointSize; };
   Q_INVOKABLE void SetDataPointSize(const QVariant& showDataPoints) { if (showDataPoints > 0) { m_DataPointSize = 3; } else { m_DataPointSize = 0; } emit SignalDataPointSizeChanged(showDataPoints); };
 
   Q_INVOKABLE QVariant GetStackedData() const { return m_StackedData; };
   Q_INVOKABLE void SetStackedData(const QVariant& stackedData) { m_StackedData = stackedData; emit SignalStackedDataChanged(m_StackedData); };
 
 signals:
   void SignalYAxisLabelChanged(const QVariant label);
   void SignalXAxisLabelChanged(const QVariant label);
   void SignalLegendPositionChanged(const QVariant legendPosition);
   void SignalShowLegendChanged(const QVariant show);
   void SignalYAxisScaleChanged(const QVariant YAxisScale);
   void SignalTitleChanged(const QVariant title);
   void SignalShowSubchartChanged(const QVariant showSubchart);
   void SignalUsePercentageInPieChartChanged(const QVariant usePercentageInPieChart);
   void SignalDataPointSizeChanged(const QVariant showDataPoints);
   void SignalStackedDataChanged(const QVariant stackedData);
 
 private:
   QVariant m_xAxisLabel;
   QVariant m_yAxisLabel;
   QVariant m_chartTitle;
 
   QVariant m_ShowLegend = true;
-  QVariant m_LegendPosition;
+  QVariant m_LegendPosition = "topRight";
   QVariant m_ShowSubchart;
   QVariant m_YAxisScale;
   QVariant m_UsePercentageInPieChart;
   QVariant m_numberDatasets;
   QVariant m_DataPointSize = 0;
   QVariant m_StackedData;
 };
 
 #endif  //QmitkC3Data_h
diff --git a/Modules/Chart/resource/Chart.js b/Modules/Chart/resource/Chart.js
index 1b8812a134..cc8085fb5d 100644
--- a/Modules/Chart/resource/Chart.js
+++ b/Modules/Chart/resource/Chart.js
@@ -1,202 +1,227 @@
 document.body.style.backgroundColor = 'rgb(240, 240, 240)';
 
 const minHeight = 255;
 var chart;
 
 var chartData;
 var xValues=[];
 var yValues=[];
 var dataLabels=[];
 var xs = {};
 var dataColors = {};
 var chartTypes = {};
 var lineStyle = {};
 
 // Important loading function. This will be executed at first in this whole script.
 // Fetching data from QWebChannel and storing them for display purposes.
 window.onload = function()
 {
   initHeight();
 
   new QWebChannel(qt.webChannelTransport, function(channel) {
     chartData = channel.objects.chartData;
 
     let count = 0;
   	for(let propertyName in channel.objects) {
   	  if (propertyName != 'chartData')
   	  {
   			let xDataTemp = channel.objects[propertyName].m_XData
   			let yDataTemp = channel.objects[propertyName].m_YData
   			let dataLabel = channel.objects[propertyName].m_Label
   			dataLabels.push(dataLabel)
 
         console.log("loading datalabel: "+dataLabel);
 
         //add label to x array
   			xDataTemp.unshift('x'+count.toString())
   			xs[dataLabel] = 'x' + count.toString()
 
   			xDataTemp.push(null); //append null value, to make sure the last tick on x-axis is displayed correctly
   			yDataTemp.unshift(dataLabel)
   			yDataTemp.push(null); //append null value, to make sure the last tick on y-axis is displayed correctly
   			xValues[count] = xDataTemp
   			yValues[count] = yDataTemp
   			dataColors[dataLabel] = channel.objects[propertyName].m_Color
   			chartTypes[dataLabel] = channel.objects[propertyName].m_ChartType
 
   			if (channel.objects[propertyName].m_LineStyleName == "solid")
   			{
   			  lineStyle[dataLabel] = ''
   			}
   			else
   			{
   			  lineStyle[dataLabel] = [{ 'style': 'dashed' }]
   			}
 
   			count++;
   		}
   	}
 
     generateChart(chartData);
 
   });
 }
 
 /**
  * Inits the height of the chart element to 90% of the full window height.
  */
 function initHeight() {
   var size = window.innerHeight-(window.innerHeight/100*10); //subtract 10% of height to hide vertical scrool bar
   let chart = document.getElementById("chart");
   chart.style.height = `${size}px`;
 }
 
 function getPlotlyChartType(inputType){
   let plotlyType = "";
   if (inputType == "line"){
     plotlyType = "scatter";
   } else if (inputType == "bar"){
     plotlyType = "bar";
   }
   return plotlyType;
 }
 
 
 
 /**
  * Here, the chart magic takes place. Plot.ly is called.
  *
  * @param {object} chartData - containing the options for plotting, not the actual values
  */
 function generateChart(chartData)
 {
   console.log("generate chart");
 	if (chartData == undefined)
 	{
 		chartData = {}
 	}
 
 	if (dataLabels == undefined)
 	{
     dataLabels = []
 	}
 
   //=============================== DATA ========================
   let data = [];
 
   for (let index = 0; index < dataLabels.length; index++){
 
     let inputType = chartTypes[dataLabels[index]];
     let chartType = getPlotlyChartType(inputType);
 
     let trace = {
       x: xValues[index].slice(1),
       y: yValues[index].slice(1),
       type: chartType,
       name: dataLabels[index],
     };
 
     if (lineStyle[dataLabels[index]]["style"] == "dashed"){
       trace["line"]["dash"] = "dot"
     }
 
     data.push(trace)
   }
 
   //=============================== STYLE ========================
   let marginTop = chartData.m_diagramTitle == undefined ? 10 : 50;
+
+  if (chartData.m_LegendPosition == "bottomMiddle"){
+	  var legendX = 0.5;
+	  var legendY = -0.75;
+  }
+  else if (chartData.m_LegendPosition == "bottomRight"){
+	  var legendX = 1;
+	  var legendY = 0;
+  }
+  else if (chartData.m_LegendPosition == "topRight"){
+	  var legendX = 1;
+	  var legendY = 1;
+  }
+  else if (chartData.m_LegendPosition == "topLeft"){
+	  var legendX = 0;
+	  var legendY = 1;
+  }
+  else if (chartData.m_LegendPosition == "middleRight"){
+	  var legendX = 1;
+	  var legendY = 0.5;
+  }
   var layout = {
     title: chartData.m_diagramTitle,
     xaxis: {
       title: chartData.m_xAxisLabel
     },
     yaxis: {
       title: chartData.m_yAxisLabel
     },
     margin: {
       l: 50,
       r: 10,
       b: 50,
       t: marginTop,
       pad: 4
     },
-	showlegend: chartData.m_ShowLegend
+	showlegend: chartData.m_ShowLegend,
+	legend: {
+		x: legendX,
+		y: legendY
+	}
   };
 
   if (chartData.m_YAxisScale){
       layout.yaxis["type"] = "log"
   }
 
   if (chartData.m_ShowSubchart){
     layout.xaxis.rangeslider = {}; // adds range slider below x axis
   }
 
   Plotly.newPlot('chart', data, layout, {displayModeBar: false, responsive: true});
 }
 
 /**
  * Change theme of chart.
  *
  * @param {string} color - dark or not dark
  */
 function changeTheme(color) {
 link = document.getElementsByTagName("link")[0];
   if (color == 'dark') {
     link.href = "Chart_dark.css";
   }
   else
   {
     link.href = "Chart.css";
   }
 };
 
 /**
  * Reload the chart with the given arguments.
  *
  * This method is called by C++. Changes on signature with caution.
  * @param {boolean} showSubchart
  * @param {string} stackDataString
  */
 function ReloadChart(showSubchart, stackDataString = false)
 {
     chartData.m_ShowSubchart = showSubchart;
     chartData.m_StackedData = stackDataString;
     generateChart(chartData);
 }
 
 /**
  * Transforms the view to another chart type.
  *
  * This method is called by C++. Changes on signature with caution.
  * @param {string} transformTo - 'line' or 'bar'
  */
 function transformView(transformTo) {
   console.log("transform view");
   console.log(transformTo);
 
   chartTypes[dataLabels[0]] = transformTo; // preserve chartType for later updates
   let plotlyType = getPlotlyChartType(transformTo);
   let chart = document.getElementById("chart");
   let update = {type : plotlyType}
   Plotly.restyle(chart, update, 0); // updates the given plotly trace at index 0 with an update object built of a standard trace object
 };