diff --git a/samples/bar-multi-axis.html b/samples/bar-multi-axis.html index cdb573007..d6ae25951 100644 --- a/samples/bar-multi-axis.html +++ b/samples/bar-multi-axis.html @@ -58,62 +58,13 @@ display: true, position: "left", id: "y-axis-1", - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }, { type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, position: "right", id: "y-axis-2", - - // grid line settings gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: false, // only want the grid lines for one axis to show up - drawTicks: false, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", + drawOnChartArea: false } }], } diff --git a/samples/bar-stacked.html b/samples/bar-stacked.html index 1d7257f3d..573be2c18 100644 --- a/samples/bar-stacked.html +++ b/samples/bar-stacked.html @@ -2,7 +2,7 @@ - Bar Chart + Stacked Bar Chart @@ -44,6 +44,9 @@ options: { responsive: true, scales: { + xAxes: [{ + stacked: true, + }], yAxes: [{ stacked: true }] diff --git a/samples/line-multi-axis.html b/samples/line-multi-axis.html index 97833376e..729cf3731 100644 --- a/samples/line-multi-axis.html +++ b/samples/line-multi-axis.html @@ -63,32 +63,6 @@ display: true, position: "left", id: "y-axis-1", - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }, { type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, @@ -97,29 +71,8 @@ // grid line settings gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, drawOnChartArea: false, // only want the grid lines for one axis to show up - drawTicks: false, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }], } } diff --git a/samples/line.html b/samples/line.html index 82ca744c5..a20b6773e 100644 --- a/samples/line.html +++ b/samples/line.html @@ -43,10 +43,10 @@ responsive: true, scales: { xAxes: [{ - display: false + display: true }], yAxes: [{ - display: false + display: true }] } } diff --git a/samples/scatter-multi-axis.html b/samples/scatter-multi-axis.html index 45e0cbed5..ab08e0d26 100644 --- a/samples/scatter-multi-axis.html +++ b/samples/scatter-multi-axis.html @@ -107,32 +107,6 @@ display: true, position: "left", id: "y-axis-1", - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }, { type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance display: true, @@ -141,29 +115,8 @@ // grid line settings gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, drawOnChartArea: false, // only want the grid lines for one axis to show up - drawTicks: false, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", }, - - // scale numbers - beginAtZero: false, - integersOnly: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }], } } diff --git a/src/charts/chart.bar.js b/src/charts/chart.bar.js index d83b25b44..1cba8b9b5 100644 --- a/src/charts/chart.bar.js +++ b/src/charts/chart.bar.js @@ -23,36 +23,6 @@ }], yAxes: [{ type: "linear", - display: true, - position: "left", - id: "y-axis-1", - - spacing: 1, - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, // draw ticks extending towards the label - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }], }, diff --git a/src/charts/chart.line.js b/src/charts/chart.line.js index 97b3e1ef2..64f2158f9 100644 --- a/src/charts/chart.line.js +++ b/src/charts/chart.line.js @@ -12,38 +12,10 @@ scales: { xAxes: [{ - type: "category", // scatter should not use a dataset axis + type: "category", }], yAxes: [{ - type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance - display: true, - position: "left", - id: "y-axis-1", - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, // draw ticks extending towards the label - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value.toLocaleString()%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } + type: "linear", }], }, }; diff --git a/src/charts/chart.polarArea.js b/src/charts/chart.polarArea.js index 4131e6bc0..b1f6a0f8f 100644 --- a/src/charts/chart.polarArea.js +++ b/src/charts/chart.polarArea.js @@ -10,44 +10,7 @@ scale: { type: "radialLinear", - display: true, - - //Boolean - Whether to animate scaling the chart from the centre - animate: false, - - lineArc: true, - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - }, - - // scale numbers - beginAtZero: true, - - // label settings - labels: { - show: true, - template: "<%=value.toLocaleString()%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - - //Boolean - Show a backdrop to the scale label - showLabelBackdrop: true, - - //String - The colour of the label backdrop - backdropColor: "rgba(255,255,255,0.75)", - - //Number - The backdrop padding above & below the label in pixels - backdropPaddingY: 2, - - //Number - The backdrop padding to the side of the label in pixels - backdropPaddingX: 2, - } + lineArc: true, // so that lines are circular }, //Boolean - Whether to animate the rotation of the chart diff --git a/src/charts/chart.radar.js b/src/charts/chart.radar.js index 3d911070f..bff30df90 100644 --- a/src/charts/chart.radar.js +++ b/src/charts/chart.radar.js @@ -13,64 +13,6 @@ scale: { type: "radialLinear", - display: true, - - //Boolean - Whether to animate scaling the chart from the centre - animate: false, - - lineArc: false, - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - }, - - angleLines: { - show: true, - color: "rgba(0,0,0,.1)", - lineWidth: 1 - }, - - // scale numbers - beginAtZero: true, - - // label settings - labels: { - show: true, - template: "<%=value.toLocaleString()%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - - //Boolean - Show a backdrop to the scale label - showLabelBackdrop: true, - - //String - The colour of the label backdrop - backdropColor: "rgba(255,255,255,0.75)", - - //Number - The backdrop padding above & below the label in pixels - backdropPaddingY: 2, - - //Number - The backdrop padding to the side of the label in pixels - backdropPaddingX: 2, - }, - - pointLabels: { - //String - Point label font declaration - fontFamily: "'Arial'", - - //String - Point label font weight - fontStyle: "normal", - - //Number - Point label font size in pixels - fontSize: 10, - - //String - Point label font colour - fontColor: "#666", - }, }, elements: { diff --git a/src/charts/chart.scatter.js b/src/charts/chart.scatter.js index a3ae03062..fb2f101fe 100644 --- a/src/charts/chart.scatter.js +++ b/src/charts/chart.scatter.js @@ -12,66 +12,14 @@ scales: { xAxes: [{ - type: "linear", // scatter should not use a dataset axis - display: true, + type: "linear", // scatter should not use a category axis position: "bottom", id: "x-axis-1", // need an ID so datasets can reference the scale - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value.toLocaleString()%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - }, }], yAxes: [{ - type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance - display: true, + type: "linear", position: "left", id: "y-axis-1", - - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - drawOnChartArea: true, - drawTicks: true, // draw ticks extending towards the label - zeroLineWidth: 1, - zeroLineColor: "rgba(0,0,0,0.25)", - }, - - // scale numbers - beginAtZero: false, - override: null, - - // label settings - labels: { - show: true, - template: "<%=value.toLocaleString()%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", - } }], }, diff --git a/src/core/core.js b/src/core/core.js index 1cb6fafc7..28eef831d 100755 --- a/src/core/core.js +++ b/src/core/core.js @@ -145,7 +145,10 @@ // Scale config merging is complex. Add out own function here for that base[key] = helpers.scaleMerge(base.hasOwnProperty(key) ? base[key] : {}, value); - } else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) { + } else if (key === 'scale') { + // Used in polar area & radar charts since there is only one scale + base[key] = helpers.configMerge(base.hasOwnProperty(key) ? base[key] : {}, Chart.scaleService.getScaleDefaults(value.type), value); + }else if (base.hasOwnProperty(key) && helpers.isArray(base[key]) && helpers.isArray(value)) { // In this case we have an array of objects replacing another array. Rather than doing a strict replace, // merge. This allows easy scale option merging var baseArray = base[key]; diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index fd4e6d800..0ddd956b5 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -5,6 +5,37 @@ Chart = root.Chart, helpers = Chart.helpers; + var defaultConfig = { + display: true, + position: "left", + id: "y-axis-1", + + // grid line settings + gridLines: { + show: true, + color: "rgba(0, 0, 0, 0.1)", + lineWidth: 1, + drawOnChartArea: true, + drawTicks: true, // draw ticks extending towards the label + zeroLineWidth: 1, + zeroLineColor: "rgba(0,0,0,0.25)", + }, + + // scale numbers + beginAtZero: false, + override: null, + + // label settings + labels: { + show: true, + template: "<%=value.toLocaleString()%>", + fontSize: 12, + fontStyle: "normal", + fontColor: "#666", + fontFamily: "Helvetica Neue", + } + }; + var LinearScale = Chart.Element.extend({ calculateRange: helpers.noop, // overridden in the chart. Will set min and max as properties of the scale for later use isHorizontal: function() { @@ -523,6 +554,6 @@ } } }); - Chart.scaleService.registerScaleType("linear", LinearScale); - + Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig); + }).call(this); diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 9d8e30eff..b15c487a3 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -5,6 +5,67 @@ Chart = root.Chart, helpers = Chart.helpers; + var defaultConfig = { + display: true, + + //Boolean - Whether to animate scaling the chart from the centre + animate: false, + + lineArc: false, + + // grid line settings + gridLines: { + show: true, + color: "rgba(0, 0, 0, 0.1)", + lineWidth: 1, + }, + + angleLines: { + show: true, + color: "rgba(0,0,0, 0.1)", + lineWidth: 1 + }, + + // scale numbers + beginAtZero: true, + + // label settings + labels: { + show: true, + template: "<%=value.toLocaleString()%>", + fontSize: 12, + fontStyle: "normal", + fontColor: "#666", + fontFamily: "Helvetica Neue", + + //Boolean - Show a backdrop to the scale label + showLabelBackdrop: true, + + //String - The colour of the label backdrop + backdropColor: "rgba(255,255,255,0.75)", + + //Number - The backdrop padding above & below the label in pixels + backdropPaddingY: 2, + + //Number - The backdrop padding to the side of the label in pixels + backdropPaddingX: 2, + }, + + pointLabels: { + //String - Point label font declaration + fontFamily: "'Arial'", + + //String - Point label font weight + fontStyle: "normal", + + //Number - Point label font size in pixels + fontSize: 10, + + //String - Point label font colour + fontColor: "#666", + }, + }; + var LinearRadialScale = Chart.Element.extend({ initialize: function() { this.size = helpers.min([this.height, this.width]); @@ -374,7 +435,7 @@ } } }); - Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale); + Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale, defaultConfig); }).call(this);