chartjs · loicbourgois · Jan 10, 2018 · Jan 11, 2018 · Jan 11, 2018 · Jan 12, 2018
diff --git a/samples/charts/combo-bar-line.html b/samples/charts/combo-bar-line.html
@@ -15,21 +15,19 @@
 </head>
 
 <body>
-    <div style="width: 60%">
+    <div style="width: 75%">
         <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
-    <div style="width: 60%">
-        <canvas id="canvas2"></canvas>
-    </div>
     <script>
         var chartData = {
             labels: ["January", "February", "March", "April", "May", "June", "July"],
             datasets: [{
-                type: 'scatter',
+                type: 'line',
                 label: 'Dataset 1',
                 borderColor: window.chartColors.blue,
                 borderWidth: 2,
+                fill: false,
                 data: [
                     randomScalingFactor(),
                     randomScalingFactor(),
@@ -40,11 +38,9 @@
                     randomScalingFactor()
                 ]
             }, {
-                type: 'line',
+                type: 'bar',
                 label: 'Dataset 2',
-                borderColor: window.chartColors.red,
-                fill: false,
-                borderWidth: 2,
+                backgroundColor: window.chartColors.red,
                 data: [
                     randomScalingFactor(),
                     randomScalingFactor(),
@@ -54,6 +50,8 @@
                     randomScalingFactor(),
                     randomScalingFactor()
                 ],
+                borderColor: 'white',
+                borderWidth: 2
             }, {
                 type: 'bar',
                 label: 'Dataset 3',
@@ -87,22 +85,6 @@
                     }
                 }
             });
-            var ctx2 = document.getElementById("canvas2").getContext("2d");
-            window.myMixedChart2 = new Chart(ctx2, {
-                type: 'line',
-                data: chartData,
-                options: {
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Combo Bar Line Chart'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: true
-                    }
-                }
-            });
         };
 
         document.getElementById('randomizeData').addEventListener('click', function() {
@@ -112,7 +94,6 @@
                 });
             });
             window.myMixedChart.update();
-            window.myMixedChart2.update();
         });
     </script>
 </body>

diff --git a/samples/charts/mixed-chart.html b/samples/charts/mixed-chart.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html>
+
+<head>
+		<title>Mixed Chart</title>
+		<script src="../../dist/Chart.bundle.js"></script>
+		<script src="../utils.js"></script>
+		<style>
+			canvas {
+					-moz-user-select: none;
+					-webkit-user-select: none;
+					-ms-user-select: none;
+			}
+			div {
+				display: flex;
+				flex-wrap: wrap;
+			}
+			div div {
+				flex-grow: 1;
+				width: 30%;
+				margin: 0.5em;
+				height: 20em;
+				min-width: 25em;
+			}
+		</style>
+</head>
+
+<body>
+		<button id="randomizeData">Randomize Data</button>
+		<div id="container">
+		</div>
+		<script>
+			var parents = ['scatter', 'line', 'bubble', 'bar', 'horizontalBar', undefined];
+			var childs = [
+				{type:'scatter', color:'#f844'},
+				{type:'scatter', color:'#f844'},
+				{type:'line', color:'#4f84', fill:false},
+				{type:'bubble', color:'#8f44'},
+				{type:'line', color:'#f484'},
+				{type:'bar', color:'#48f4'},
+				{type:'bar', color:'#84f4'},
+				//{type:'horizontalBar', color:'#84f4'} // not supported yet
+			]
+			var size = 8;
+			var charts = [];
+			parents.forEach(function(parent) {
+				var datasets = [];
+				var c = -1;
+				var labels = [];
+				childs.forEach(function(child) {
+					c++;
+					var data = [];
+					for(var i = 0 ; i < size ; i++) {
+						if(child.type === 'bubble') {
+							data.push({x:randomScalingFactor(), y:randomScalingFactor(),r:Math.max(randomScalingFactor()/2, 20)});
+						} else {
+							data.push(randomScalingFactor());
+						}
+						if(!c) {
+							labels.push('label '+(i+1));
+						}
+					}
+					datasets.push({
+						type: child.type,
+						label: child.type,
+						borderColor: child.color,
+						backgroundColor: child.color,
+						data: data,
+					});
+					if(child.fill !== undefined) {
+						datasets[datasets.length-1].fill = child.fill;
+					}
+				});
+				var div = document.createElement("div");
+				var canvas = document.createElement("canvas");
+				canvas.id = parent;
+				div.appendChild(canvas);
+				document.getElementById("container").appendChild(div);
+				var str = ''; 
+				childs.forEach(function(child) {
+					str += child.type + ', ';
+				})
+				str = str.slice(0,-2);
+				charts.push(new Chart(canvas.getContext("2d"), {
+					type: parent,
+					data: {
+						labels: labels,
+						datasets: datasets,
+					},
+					options: {
+						responsive: true,
+						title: {
+							display: true,
+							text: 'Main type : ' + parent + ' | Childs : ' + str,
+						},
+						tooltips: {
+							mode: 'index',
+							intersect: true
+						}
+					}
+				}));
+			});
+				console.log(charts);
+			document.getElementById('randomizeData').addEventListener('click', function() {
+
+					charts.forEach(function(chart) {
+						chart.data.datasets.forEach(function(dataset) {
+							dataset.data = dataset.data.map(function(a) {
+									if(a.r) {
+										return {x:randomScalingFactor(),y:randomScalingFactor(),r:Math.max(randomScalingFactor()/3, 10)};
+									}
+									return randomScalingFactor();
+							});
+					});
+						chart.update();
+					});
+				console.log(charts);
+				});
+		</script>
+</body>
+
+</html>
diff --git a/samples/samples.js b/samples/samples.js
@@ -80,8 +80,11 @@
 			title: 'Radar',
 			path: 'charts/radar.html'
 		}, {
-			title: 'Combo bar/line/scatter',
+			title: 'Combo bar/line',
 			path: 'charts/combo-bar-line.html'
+		}, {
+			title: 'Mixed',
+			path: 'charts/mixed-chart.html'
 		}]
 	}, {
 		title: 'Linear scale',

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
@@ -4,7 +4,7 @@ var defaults = require('../core/core.defaults');
 var elements = require('../elements/index');
 var helpers = require('../helpers/index');
 
-var defaultBar = {
+defaults._set('bar', {
 	hover: {
 		mode: 'label'
 	},
@@ -30,8 +30,7 @@ var defaultBar = {
 			type: 'linear'
 		}]
 	}
-};
-defaults._set('bar', defaultBar);
+});
 
 defaults._set('horizontalBar', {
 	hover: {
@@ -285,14 +284,7 @@ module.exports = function(Chart) {
 		 * @private
 		 */
 		getIndexScale: function() {
-			var scale = this.getScaleForId(this.getIndexScaleId());
-			if (scale.options.categoryPercentage === undefined) {
-				scale.options.categoryPercentage = defaultBar.scales.xAxes[0].categoryPercentage;
-			}
-			if (scale.options.barPercentage === undefined) {
-				scale.options.barPercentage = defaultBar.scales.xAxes[0].barPercentage;
-			}
-			return scale;
+			return this.getScaleForId(this.getIndexScaleId());
 		},
 
 		/**
@@ -435,6 +427,7 @@ module.exports = function(Chart) {
 			var range = options.barThickness === 'flex'
 				? computeFlexCategoryTraits(index, ruler, options)
 				: computeFitCategoryTraits(index, ruler, options);
+
 			var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
 			var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
 			var size = Math.min(

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -31,10 +31,74 @@ module.exports = function(Chart) {
 		data.datasets = data.datasets || [];
 		data.labels = data.labels || [];
 
-		config.options = helpers.configMerge(
+
+		// Merge options for mixed charts
+		// [1] Does not work if axes are stacked
+		// [2] Only triggered if there are at least 2 different types
+		// [3] If there is at least one 'bar' chart, main type is set to 'bar'
+		// [4] If the main chart has no type and there's no 'bar' child chart,
+		//     we set the main chart to 'line'
+		//     This way, users can use a mixed chart without having to set a main type
+		var isStacked = false;
+		var optionstmp = helpers.configMerge(
 			defaults.global,
 			defaults[config.type],
 			config.options || {});
+		if (optionstmp && optionstmp.scales && optionstmp.scales.xAxes && optionstmp.scales.yAxes) {
+			optionstmp.scales.xAxes.forEach(function(axe) {
+				if (axe.stacked === true) {
+					isStacked = true; // [1]
+				}
+			});
+			optionstmp.scales.yAxes.forEach(function(axe) {
+				if (axe.stacked === true) {
+					isStacked = true; // [1]
+				}
+			});
+		}
+
+		var alreadyMerged = false;
+		if (!isStacked && data && data.datasets && data.datasets.length >= 2) { // [2]
+			var type = null;
+			var isMixed = false;
+			var hasBarType = false;
+			data.datasets.forEach(function(dataset) {
+				if (type && dataset.type && type !== dataset.type) {
+					isMixed = true; // [2]
+				} else if (dataset.type) {
+					type = dataset.type;
+				}
+				if (dataset.type === 'bar') {
+					hasBarType = true;
+				}
+			});
+			if (isMixed) {
+				if (hasBarType) { // [3]
+					config.options = helpers.configMerge(
+						defaults.global,
+						defaults.bar,
+						config.options || {});
+				} else {
+					config.options = helpers.configMerge(
+						defaults.global,
+						defaults[config.type || 'line'], // [4]
+						config.options || {});
+				}
+
+				data.datasets.forEach(function(dataset) {
+					config.options = helpers.configMerge(defaults[dataset.type], config.options || {});
+				});
+				alreadyMerged = true;
+			}
+		}
+
+		// Merge
+		if (!alreadyMerged) {
+			config.options = helpers.configMerge(
+				defaults.global,
+				defaults[config.type],
+				config.options || {});
+		}
 
 		return config;
 	}

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -148,6 +148,9 @@ module.exports = function(Chart) {
 		// Any function can be extended by the scale type
 
 		mergeTicksOptions: function() {
+			if (!this.options.ticks) {
+				return;
+			}
 			var ticks = this.options.ticks;
 			if (ticks.minor === false) {
 				ticks.minor = {