chartjs · etimberg · Mar 16, 2021 · Mar 16, 2021 · Mar 16, 2021
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
@@ -86,13 +86,14 @@ export default class LineController extends DatasetController {
   getMaxOverflow() {
     const me = this;
     const meta = me._cachedMeta;
-    const border = meta.dataset.options.borderWidth || 0;
+    const dataset = meta.dataset;
+    const border = dataset.options && dataset.options.borderWidth || 0;
     const data = meta.data || [];
     if (!data.length) {
       return border;
     }
-    const firstPoint = data[0].size();
-    const lastPoint = data[data.length - 1].size();
+    const firstPoint = data[0].size(me.resolveDataElementOptions(0));
+    const lastPoint = data[data.length - 1].size(me.resolveDataElementOptions(data.length - 1));
     return Math.max(border, firstPoint, lastPoint) / 2;
   }
 

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -474,15 +474,17 @@ class Chart {
     me.notifyPlugins('beforeElementsUpdate');
 
     // Make sure all dataset controllers have correct meta data counts
+    let minPadding = 0;
     for (let i = 0, ilen = me.data.datasets.length; i < ilen; i++) {
       const {controller} = me.getDatasetMeta(i);
       const reset = !animsDisabled && newControllers.indexOf(controller) === -1;
       // New controllers will be reset after the layout pass, so we only want to modify
       // elements added to new datasets
       controller.buildOrUpdateElements(reset);
+      minPadding = Math.max(+controller.getMaxOverflow(), minPadding);
     }
-
-    me._updateLayout();
+    me._minPadding = minPadding;
+    me._updateLayout(minPadding);
 
     // Only reset the controllers if we have animations
     if (!animsDisabled) {
@@ -513,14 +515,14 @@ class Chart {
 	 * hook, in which case, plugins will not be called on `afterLayout`.
 	 * @private
 	 */
-  _updateLayout() {
+  _updateLayout(minPadding) {
     const me = this;
 
     if (me.notifyPlugins('beforeLayout', {cancelable: true}) === false) {
       return;
     }
 
-    layouts.update(me, me.width, me.height);
+    layouts.update(me, me.width, me.height, minPadding);
 
     const area = me.chartArea;
     const noArea = area.width <= 0 || area.height <= 0;
@@ -1087,7 +1089,7 @@ class Chart {
     callCallback(options.onHover || hoverOptions.onHover, [e, active, me], me);
 
     if (e.type === 'mouseup' || e.type === 'click' || e.type === 'contextmenu') {
-      if (_isPointInArea(e, me.chartArea)) {
+      if (_isPointInArea(e, me.chartArea, me._minPadding)) {
         callCallback(options.onClick, [e, active, me], me);
       }
     }

diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js
@@ -128,7 +128,7 @@ function getDistanceMetricForAxis(axis) {
 function getIntersectItems(chart, position, axis, useFinalPosition) {
   const items = [];
 
-  if (!_isPointInArea(position, chart.chartArea)) {
+  if (!_isPointInArea(position, chart.chartArea, chart._minPadding)) {
     return items;
   }
 
@@ -156,7 +156,7 @@ function getNearestItems(chart, position, axis, intersect, useFinalPosition) {
   let minDistance = Number.POSITIVE_INFINITY;
   let items = [];
 
-  if (!_isPointInArea(position, chart.chartArea)) {
+  if (!_isPointInArea(position, chart.chartArea, chart._minPadding)) {
     return items;
   }
 

diff --git a/src/core/core.layouts.js b/src/core/core.layouts.js
@@ -306,8 +306,9 @@ export default {
 	 * @param {Chart} chart - the chart
 	 * @param {number} width - the width to fit into
 	 * @param {number} height - the height to fit into
+   * @param {number} minPadding - minimum padding required for each side of chart area
 	 */
-  update(chart, width, height) {
+  update(chart, width, height, minPadding) {
     if (!chart) {
       return;
     }
@@ -366,8 +367,10 @@ export default {
       vBoxMaxWidth: availableWidth / 2 / visibleVerticalBoxCount,
       hBoxMaxHeight: availableHeight / 2
     });
+    const maxPadding = Object.assign({}, padding);
+    updateMaxPadding(maxPadding, toPadding(minPadding));
     const chartArea = Object.assign({
-      maxPadding: Object.assign({}, padding),
+      maxPadding,
       w: availableWidth,
       h: availableHeight,
       x: padding.left,

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
@@ -41,9 +41,10 @@ export default class PointElement extends Element {
     return {x, y};
   }
 
-  size() {
-    const options = this.options || {};
-    const radius = Math.max(options.radius, options.hoverRadius) || 0;
+  size(options) {
+    options = options || this.options || {};
+    let radius = options.radius || 0;
+    radius = Math.max(radius, radius && options.hoverRadius || 0);
     const borderWidth = radius && options.borderWidth || 0;
     return (radius + borderWidth) * 2;
   }

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
@@ -244,14 +244,15 @@ export function drawPoint(ctx, options, x, y) {
  * Returns true if the point is inside the rectangle
  * @param {object} point - The point to test
  * @param {object} area - The rectangle
+ * @param {number} [margin] - allowed margin
  * @returns {boolean}
  * @private
  */
-export function _isPointInArea(point, area) {
-  const epsilon = 0.5; // margin - to match rounded decimals
+export function _isPointInArea(point, area, margin) {
+  margin = margin || 0.5; // margin - default is to match rounded decimals
 
-  return point.x > area.left - epsilon && point.x < area.right + epsilon &&
-		point.y > area.top - epsilon && point.y < area.bottom + epsilon;
+  return point.x > area.left - margin && point.x < area.right + margin &&
+		point.y > area.top - margin && point.y < area.bottom + margin;
 }
 
 export function clipArea(ctx, area) {

diff --git a/test/fixtures/controller.line/clip/default-y-max.png b/test/fixtures/controller.line/clip/default-y-max.png
diff --git a/test/fixtures/controller.line/clip/default-y.png b/test/fixtures/controller.line/clip/default-y.png
diff --git a/test/fixtures/controller.line/non-numeric-y.png b/test/fixtures/controller.line/non-numeric-y.png
diff --git a/test/fixtures/controller.line/point-style-offscreen-canvas.png b/test/fixtures/controller.line/point-style-offscreen-canvas.png
diff --git a/test/fixtures/controller.line/point-style.png b/test/fixtures/controller.line/point-style.png
diff --git a/test/fixtures/controller.line/pointBackgroundColor/indexable.png b/test/fixtures/controller.line/pointBackgroundColor/indexable.png
diff --git a/test/fixtures/controller.line/pointBackgroundColor/scriptable.png b/test/fixtures/controller.line/pointBackgroundColor/scriptable.png
diff --git a/test/fixtures/controller.line/pointBackgroundColor/value.png b/test/fixtures/controller.line/pointBackgroundColor/value.png
diff --git a/test/fixtures/controller.line/pointBorderColor/indexable.png b/test/fixtures/controller.line/pointBorderColor/indexable.png
diff --git a/test/fixtures/controller.line/pointBorderColor/scriptable.png b/test/fixtures/controller.line/pointBorderColor/scriptable.png
diff --git a/test/fixtures/controller.line/pointBorderColor/value.png b/test/fixtures/controller.line/pointBorderColor/value.png
diff --git a/test/fixtures/controller.line/pointBorderWidth/indexable.png b/test/fixtures/controller.line/pointBorderWidth/indexable.png
diff --git a/test/fixtures/controller.line/pointBorderWidth/scriptable.png b/test/fixtures/controller.line/pointBorderWidth/scriptable.png
diff --git a/test/fixtures/controller.line/pointBorderWidth/value.png b/test/fixtures/controller.line/pointBorderWidth/value.png
diff --git a/test/fixtures/controller.line/pointStyle/indexable.png b/test/fixtures/controller.line/pointStyle/indexable.png
diff --git a/test/fixtures/controller.line/pointStyle/scriptable.png b/test/fixtures/controller.line/pointStyle/scriptable.png
diff --git a/test/fixtures/controller.line/pointStyle/value.png b/test/fixtures/controller.line/pointStyle/value.png
diff --git a/test/fixtures/controller.line/radius/indexable.png b/test/fixtures/controller.line/radius/indexable.png
diff --git a/test/fixtures/controller.line/radius/scriptable.png b/test/fixtures/controller.line/radius/scriptable.png
diff --git a/test/fixtures/controller.line/radius/value.png b/test/fixtures/controller.line/radius/value.png
diff --git a/test/fixtures/controller.line/rotation/indexable.png b/test/fixtures/controller.line/rotation/indexable.png
diff --git a/test/fixtures/controller.line/rotation/scriptable.png b/test/fixtures/controller.line/rotation/scriptable.png
diff --git a/test/fixtures/controller.line/rotation/value.png b/test/fixtures/controller.line/rotation/value.png
diff --git a/test/fixtures/controller.line/showLine/false.png b/test/fixtures/controller.line/showLine/false.png
diff --git a/test/fixtures/controller.line/stacking/stacked-scatter.png b/test/fixtures/controller.line/stacking/stacked-scatter.png
diff --git a/test/fixtures/controller.scatter/showLine/true.png b/test/fixtures/controller.scatter/showLine/true.png
diff --git a/test/fixtures/controller.scatter/showLine/undefined.png b/test/fixtures/controller.scatter/showLine/undefined.png
diff --git a/test/fixtures/core.layouts/hidden-vertical-boxes.png b/test/fixtures/core.layouts/hidden-vertical-boxes.png
diff --git a/test/fixtures/core.layouts/no-boxes-all-padding.js b/test/fixtures/core.layouts/no-boxes-all-padding.js
@@ -6,6 +6,7 @@ module.exports = {
       datasets: [{
         data: [0],
         radius: 16,
+        borderWidth: 0,
         backgroundColor: 'red'
       }],
     },

diff --git a/test/fixtures/core.layouts/no-boxes-all-padding.png b/test/fixtures/core.layouts/no-boxes-all-padding.png
diff --git a/test/fixtures/core.layouts/refit-vertical-boxes.png b/test/fixtures/core.layouts/refit-vertical-boxes.png
diff --git a/test/fixtures/core.scale/autoSkip/fit-after.png b/test/fixtures/core.scale/autoSkip/fit-after.png
diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.png b/test/fixtures/core.scale/cartesian-axis-border-settings.png
diff --git a/test/fixtures/core.scale/label-align-end.png b/test/fixtures/core.scale/label-align-end.png
diff --git a/test/fixtures/core.scale/label-align-start.png b/test/fixtures/core.scale/label-align-start.png
diff --git a/test/fixtures/core.scale/x-axis-position-dynamic.png b/test/fixtures/core.scale/x-axis-position-dynamic.png
diff --git a/test/fixtures/element.line/default.png b/test/fixtures/element.line/default.png
diff --git a/test/fixtures/element.line/skip/first-span.png b/test/fixtures/element.line/skip/first-span.png
diff --git a/test/fixtures/element.line/skip/first.png b/test/fixtures/element.line/skip/first.png
diff --git a/test/fixtures/element.line/skip/last-span.png b/test/fixtures/element.line/skip/last-span.png
diff --git a/test/fixtures/element.line/skip/last.png b/test/fixtures/element.line/skip/last.png
diff --git a/test/fixtures/element.line/stepped/after.png b/test/fixtures/element.line/stepped/after.png
diff --git a/test/fixtures/element.line/stepped/before.png b/test/fixtures/element.line/stepped/before.png
diff --git a/test/fixtures/element.line/stepped/default.png b/test/fixtures/element.line/stepped/default.png
diff --git a/test/fixtures/element.line/stepped/middle.png b/test/fixtures/element.line/stepped/middle.png
diff --git a/test/fixtures/element.line/tension/default.png b/test/fixtures/element.line/tension/default.png
diff --git a/test/fixtures/element.line/tension/one.png b/test/fixtures/element.line/tension/one.png
diff --git a/test/fixtures/element.line/tension/zero.png b/test/fixtures/element.line/tension/zero.png
diff --git a/test/fixtures/plugin.filler/fill-line-dataset-interpolated.png b/test/fixtures/plugin.filler/fill-line-dataset-interpolated.png
diff --git a/test/fixtures/plugin.tooltip/positioning.js b/test/fixtures/plugin.tooltip/positioning.js
@@ -12,7 +12,8 @@ module.exports = {
       datasets: [{
         data,
         backgroundColor: 'red',
-        radius: 8
+        radius: 1,
+        hoverRadius: 0
       }],
     },
     options: {

diff --git a/test/fixtures/plugin.tooltip/positioning.png b/test/fixtures/plugin.tooltip/positioning.png
diff --git a/test/fixtures/scale.time/autoskip-major.png b/test/fixtures/scale.time/autoskip-major.png
diff --git a/test/fixtures/scale.time/custom-parser.png b/test/fixtures/scale.time/custom-parser.png
diff --git a/test/fixtures/scale.time/data-ty.png b/test/fixtures/scale.time/data-ty.png
diff --git a/test/fixtures/scale.time/data-xy.png b/test/fixtures/scale.time/data-xy.png
diff --git a/test/fixtures/scale.time/negative-times.png b/test/fixtures/scale.time/negative-times.png
diff --git a/test/fixtures/scale.time/source-auto-linear.png b/test/fixtures/scale.time/source-auto-linear.png
diff --git a/test/fixtures/scale.time/source-data-linear.png b/test/fixtures/scale.time/source-data-linear.png
diff --git a/test/fixtures/scale.time/source-labels-linear-offset-min-max.png b/test/fixtures/scale.time/source-labels-linear-offset-min-max.png
diff --git a/test/fixtures/scale.time/source-labels-linear.png b/test/fixtures/scale.time/source-labels-linear.png
diff --git a/test/fixtures/scale.time/ticks-reverse-linear-min-max.png b/test/fixtures/scale.time/ticks-reverse-linear-min-max.png
diff --git a/test/fixtures/scale.time/ticks-reverse-linear.png b/test/fixtures/scale.time/ticks-reverse-linear.png
diff --git a/test/fixtures/scale.time/ticks-reverse-offset.png b/test/fixtures/scale.time/ticks-reverse-offset.png
diff --git a/test/fixtures/scale.time/ticks-reverse.png b/test/fixtures/scale.time/ticks-reverse.png
diff --git a/test/fixtures/scale.timeseries/normalize.png b/test/fixtures/scale.timeseries/normalize.png
diff --git a/test/fixtures/scale.timeseries/source-auto.png b/test/fixtures/scale.timeseries/source-auto.png
diff --git a/test/fixtures/scale.timeseries/source-data-offset-min-max.png b/test/fixtures/scale.timeseries/source-data-offset-min-max.png
diff --git a/test/fixtures/scale.timeseries/source-data.png b/test/fixtures/scale.timeseries/source-data.png
diff --git a/test/fixtures/scale.timeseries/source-labels-offset-min-max.png b/test/fixtures/scale.timeseries/source-labels-offset-min-max.png
diff --git a/test/fixtures/scale.timeseries/source-labels.png b/test/fixtures/scale.timeseries/source-labels.png
diff --git a/test/fixtures/scale.timeseries/ticks-reverse-max.png b/test/fixtures/scale.timeseries/ticks-reverse-max.png
diff --git a/test/fixtures/scale.timeseries/ticks-reverse-min-max.png b/test/fixtures/scale.timeseries/ticks-reverse-min-max.png
diff --git a/test/fixtures/scale.timeseries/ticks-reverse-min.png b/test/fixtures/scale.timeseries/ticks-reverse-min.png
diff --git a/test/fixtures/scale.timeseries/ticks-reverse.png b/test/fixtures/scale.timeseries/ticks-reverse.png
diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js
@@ -691,9 +691,9 @@ describe('Chart.controllers.bar', function() {
     var bar2 = meta.data[1];
 
     expect(bar1.x).toBeCloseToPixel(179);
-    expect(bar1.y).toBeCloseToPixel(114);
-    expect(bar2.x).toBeCloseToPixel(435);
-    expect(bar2.y).toBeCloseToPixel(0);
+    expect(bar1.y).toBeCloseToPixel(117);
+    expect(bar2.x).toBeCloseToPixel(431);
+    expect(bar2.y).toBeCloseToPixel(4);
   });
 
   it('should get the bar points for hidden dataset', function() {

diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
@@ -142,8 +142,8 @@ describe('Chart.controllers.line', function() {
     expect(meta._parsed.length).toBe(2);
 
     [
-      {x: 0, y: 512},
-      {x: 171, y: 0}
+      {x: 5, y: 507},
+      {x: 171, y: 5}
     ].forEach(function(expected, i) {
       expect(meta.data[i].x).toBeCloseToPixel(expected.x);
       expect(meta.data[i].y).toBeCloseToPixel(expected.y);
@@ -192,7 +192,7 @@ describe('Chart.controllers.line', function() {
     var meta = chart.getDatasetMeta(0);
     // 1 point
     var point = meta.data[0];
-    expect(point.x).toBeCloseToPixel(0);
+    expect(point.x).toBeCloseToPixel(5);
 
     // 2 points
     chart.data.labels = ['One', 'Two'];
@@ -201,8 +201,8 @@ describe('Chart.controllers.line', function() {
 
     var points = meta.data;
 
-    expect(points[0].x).toBeCloseToPixel(0);
-    expect(points[1].x).toBeCloseToPixel(512);
+    expect(points[0].x).toBeCloseToPixel(5);
+    expect(points[1].x).toBeCloseToPixel(507);
 
     // 3 points
     chart.data.labels = ['One', 'Two', 'Three'];
@@ -211,9 +211,9 @@ describe('Chart.controllers.line', function() {
 
     points = meta.data;
 
-    expect(points[0].x).toBeCloseToPixel(0);
+    expect(points[0].x).toBeCloseToPixel(5);
     expect(points[1].x).toBeCloseToPixel(256);
-    expect(points[2].x).toBeCloseToPixel(512);
+    expect(points[2].x).toBeCloseToPixel(507);
 
     // 4 points
     chart.data.labels = ['One', 'Two', 'Three', 'Four'];
@@ -222,10 +222,10 @@ describe('Chart.controllers.line', function() {
 
     points = meta.data;
 
-    expect(points[0].x).toBeCloseToPixel(0);
+    expect(points[0].x).toBeCloseToPixel(5);
     expect(points[1].x).toBeCloseToPixel(171);
     expect(points[2].x).toBeCloseToPixel(340);
-    expect(points[3].x).toBeCloseToPixel(512);
+    expect(points[3].x).toBeCloseToPixel(507);
   });
 
   it('should update elements when the y scale is stacked', function() {
@@ -261,10 +261,10 @@ describe('Chart.controllers.line', function() {
     var meta0 = chart.getDatasetMeta(0);
 
     [
-      {x: 0, y: 146},
-      {x: 171, y: 439},
-      {x: 341, y: 146},
-      {x: 512, y: 439}
+      {x: 5, y: 148},
+      {x: 171, y: 435},
+      {x: 341, y: 148},
+      {x: 507, y: 435}
     ].forEach(function(values, i) {
       expect(meta0.data[i].x).toBeCloseToPixel(values.x);
       expect(meta0.data[i].y).toBeCloseToPixel(values.y);
@@ -273,10 +273,10 @@ describe('Chart.controllers.line', function() {
     var meta1 = chart.getDatasetMeta(1);
 
     [
-      {x: 0, y: 0},
-      {x: 171, y: 73},
-      {x: 341, y: 146},
-      {x: 512, y: 497}
+      {x: 5, y: 5},
+      {x: 171, y: 76},
+      {x: 341, y: 148},
+      {x: 507, y: 492}
     ].forEach(function(values, i) {
       expect(meta1.data[i].x).toBeCloseToPixel(values.x);
       expect(meta1.data[i].y).toBeCloseToPixel(values.y);
@@ -326,10 +326,10 @@ describe('Chart.controllers.line', function() {
     var meta0 = chart.getDatasetMeta(0);
 
     [
-      {x: 0, y: 146},
-      {x: 171, y: 439},
-      {x: 341, y: 146},
-      {x: 512, y: 439}
+      {x: 5, y: 148},
+      {x: 171, y: 435},
+      {x: 341, y: 148},
+      {x: 507, y: 435}
     ].forEach(function(values, i) {
       expect(meta0.data[i].x).toBeCloseToPixel(values.x);
       expect(meta0.data[i].y).toBeCloseToPixel(values.y);
@@ -338,10 +338,10 @@ describe('Chart.controllers.line', function() {
     var meta1 = chart.getDatasetMeta(1);
 
     [
-      {x: 0, y: 0},
-      {x: 171, y: 73},
-      {x: 341, y: 146},
-      {x: 512, y: 497}
+      {x: 5, y: 5},
+      {x: 171, y: 76},
+      {x: 341, y: 148},
+      {x: 507, y: 492}
     ].forEach(function(values, i) {
       expect(meta1.data[i].x).toBeCloseToPixel(values.x);
       expect(meta1.data[i].y).toBeCloseToPixel(values.y);
@@ -406,10 +406,10 @@ describe('Chart.controllers.line', function() {
     var meta0 = chart.getDatasetMeta(0);
 
     [
-      {x: 0, y: 146},
-      {x: 171, y: 439},
-      {x: 341, y: 146},
-      {x: 512, y: 439}
+      {x: 5, y: 148},
+      {x: 171, y: 435},
+      {x: 341, y: 148},
+      {x: 507, y: 435}
     ].forEach(function(values, i) {
       expect(meta0.data[i].x).toBeCloseToPixel(values.x);
       expect(meta0.data[i].y).toBeCloseToPixel(values.y);
@@ -418,10 +418,10 @@ describe('Chart.controllers.line', function() {
     var meta1 = chart.getDatasetMeta(1);
 
     [
-      {x: 0, y: 0},
-      {x: 171, y: 73},
-      {x: 341, y: 146},
-      {x: 512, y: 497}
+      {x: 5, y: 5},
+      {x: 171, y: 76},
+      {x: 341, y: 148},
+      {x: 507, y: 492}
     ].forEach(function(values, i) {
       expect(meta1.data[i].x).toBeCloseToPixel(values.x);
       expect(meta1.data[i].y).toBeCloseToPixel(values.y);
@@ -462,10 +462,10 @@ describe('Chart.controllers.line', function() {
     var meta0 = chart.getDatasetMeta(0);
 
     [
-      {x: 0, y: 146},
-      {x: 171, y: 439},
-      {x: 341, y: 146},
-      {x: 512, y: 439}
+      {x: 5, y: 148},
+      {x: 171, y: 435},
+      {x: 341, y: 148},
+      {x: 507, y: 435}
     ].forEach(function(values, i) {
       expect(meta0.data[i].x).toBeCloseToPixel(values.x);
       expect(meta0.data[i].y).toBeCloseToPixel(values.y);
@@ -474,10 +474,10 @@ describe('Chart.controllers.line', function() {
     var meta1 = chart.getDatasetMeta(1);
 
     [
-      {x: 0, y: 0},
-      {x: 171, y: 73},
-      {x: 341, y: 146},
-      {x: 512, y: 497}
+      {x: 5, y: 5},
+      {x: 171, y: 76},
+      {x: 341, y: 148},
+      {x: 507, y: 492}
     ].forEach(function(values, i) {
       expect(meta1.data[i].x).toBeCloseToPixel(values.x);
       expect(meta1.data[i].y).toBeCloseToPixel(values.y);

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
@@ -275,6 +275,30 @@ describe('Chart', function() {
       expect(chart.getActiveElements()).toEqual([{datasetIndex: 0, index: 1, element: point}]);
     });
 
+    it('should activate element on hover when minPadding pixels outside chart area', async function() {
+      var chart = acquireChart({
+        type: 'line',
+        data: {
+          labels: ['A', 'B', 'C', 'D'],
+          datasets: [{
+            data: [10, 20, 30, 100],
+            hoverRadius: 0
+          }],
+        },
+        options: {
+          scales: {
+            x: {display: false},
+            y: {display: false}
+          }
+        }
+      });
+
+      var point = chart.getDatasetMeta(0).data[0];
+
+      await jasmine.triggerMouseEvent(chart, 'mousemove', {x: 1, y: point.y});
+      expect(chart.getActiveElements()).toEqual([{datasetIndex: 0, index: 0, element: point}]);
+    });
+
     it('should not activate elements when hover is disabled', async function() {
       var chart = acquireChart({
         type: 'line',