q2-tecton-elements 1.21.2 → 1.22.1

package/dist/cjs/q2-chart-bar.cjs.entry.js

@@ -0,0 +1,4679 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-734296a7.js');
+const index$1 = require('./index-3518c78c.js');
+const installCanvasRenderer = require('./installCanvasRenderer-b4d10c92.js');
+
+/**
+ * @class
+ * For example:
+ * {
+ *     coordSysName: 'cartesian2d',
+ *     coordSysDims: ['x', 'y', ...],
+ *     axisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: yAxisModel
+ *     }),
+ *     categoryAxisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: undefined
+ *     }),
+ *     // The index of the first category axis in `coordSysDims`.
+ *     // `null/undefined` means no category axis exists.
+ *     firstCategoryDimIndex: 1,
+ *     // To replace user specified encode.
+ * }
+ */
+
+var CoordSysInfo =
+/** @class */
+function () {
+  function CoordSysInfo(coordSysName) {
+    this.coordSysDims = [];
+    this.axisMap = installCanvasRenderer.createHashMap();
+    this.categoryAxisMap = installCanvasRenderer.createHashMap();
+    this.coordSysName = coordSysName;
+  }
+
+  return CoordSysInfo;
+}();
+
+function getCoordSysInfoBySeries(seriesModel) {
+  var coordSysName = seriesModel.get('coordinateSystem');
+  var result = new CoordSysInfo(coordSysName);
+  var fetch = fetchers[coordSysName];
+
+  if (fetch) {
+    fetch(seriesModel, result, result.axisMap, result.categoryAxisMap);
+    return result;
+  }
+}
+var fetchers = {
+  cartesian2d: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var xAxisModel = seriesModel.getReferringComponents('xAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var yAxisModel = seriesModel.getReferringComponents('yAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+
+    result.coordSysDims = ['x', 'y'];
+    axisMap.set('x', xAxisModel);
+    axisMap.set('y', yAxisModel);
+
+    if (isCategory(xAxisModel)) {
+      categoryAxisMap.set('x', xAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+
+    if (isCategory(yAxisModel)) {
+      categoryAxisMap.set('y', yAxisModel);
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
+    }
+  },
+  singleAxis: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var singleAxisModel = seriesModel.getReferringComponents('singleAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+
+    result.coordSysDims = ['single'];
+    axisMap.set('single', singleAxisModel);
+
+    if (isCategory(singleAxisModel)) {
+      categoryAxisMap.set('single', singleAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+  },
+  polar: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var polarModel = seriesModel.getReferringComponents('polar', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
+    var angleAxisModel = polarModel.findAxisModel('angleAxis');
+
+    result.coordSysDims = ['radius', 'angle'];
+    axisMap.set('radius', radiusAxisModel);
+    axisMap.set('angle', angleAxisModel);
+
+    if (isCategory(radiusAxisModel)) {
+      categoryAxisMap.set('radius', radiusAxisModel);
+      result.firstCategoryDimIndex = 0;
+    }
+
+    if (isCategory(angleAxisModel)) {
+      categoryAxisMap.set('angle', angleAxisModel);
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
+    }
+  },
+  geo: function (seriesModel, result, axisMap, categoryAxisMap) {
+    result.coordSysDims = ['lng', 'lat'];
+  },
+  parallel: function (seriesModel, result, axisMap, categoryAxisMap) {
+    var ecModel = seriesModel.ecModel;
+    var parallelModel = ecModel.getComponent('parallel', seriesModel.get('parallelIndex'));
+    var coordSysDims = result.coordSysDims = parallelModel.dimensions.slice();
+    installCanvasRenderer.each(parallelModel.parallelAxisIndex, function (axisIndex, index) {
+      var axisModel = ecModel.getComponent('parallelAxis', axisIndex);
+      var axisDim = coordSysDims[index];
+      axisMap.set(axisDim, axisModel);
+
+      if (isCategory(axisModel)) {
+        categoryAxisMap.set(axisDim, axisModel);
+
+        if (result.firstCategoryDimIndex == null) {
+          result.firstCategoryDimIndex = index;
+        }
+      }
+    });
+  }
+};
+
+function isCategory(axisModel) {
+  return axisModel.get('type') === 'category';
+}
+
+function getCoordSysDimDefs(seriesModel, coordSysInfo) {
+  var coordSysName = seriesModel.get('coordinateSystem');
+  var registeredCoordSys = installCanvasRenderer.CoordinateSystemManager.get(coordSysName);
+  var coordSysDimDefs;
+
+  if (coordSysInfo && coordSysInfo.coordSysDims) {
+    coordSysDimDefs = installCanvasRenderer.map(coordSysInfo.coordSysDims, function (dim) {
+      var dimInfo = {
+        name: dim
+      };
+      var axisModel = coordSysInfo.axisMap.get(dim);
+
+      if (axisModel) {
+        var axisType = axisModel.get('type');
+        dimInfo.type = installCanvasRenderer.getDimensionTypeByAxis(axisType);
+      }
+
+      return dimInfo;
+    });
+  }
+
+  if (!coordSysDimDefs) {
+    // Get dimensions from registered coordinate system
+    coordSysDimDefs = registeredCoordSys && (registeredCoordSys.getDimensionsInfo ? registeredCoordSys.getDimensionsInfo() : registeredCoordSys.dimensions.slice()) || ['x', 'y'];
+  }
+
+  return coordSysDimDefs;
+}
+
+function injectOrdinalMeta(dimInfoList, createInvertedIndices, coordSysInfo) {
+  var firstCategoryDimIndex;
+  var hasNameEncode;
+  coordSysInfo && installCanvasRenderer.each(dimInfoList, function (dimInfo, dimIndex) {
+    var coordDim = dimInfo.coordDim;
+    var categoryAxisModel = coordSysInfo.categoryAxisMap.get(coordDim);
+
+    if (categoryAxisModel) {
+      if (firstCategoryDimIndex == null) {
+        firstCategoryDimIndex = dimIndex;
+      }
+
+      dimInfo.ordinalMeta = categoryAxisModel.getOrdinalMeta();
+
+      if (createInvertedIndices) {
+        dimInfo.createInvertedIndices = true;
+      }
+    }
+
+    if (dimInfo.otherDims.itemName != null) {
+      hasNameEncode = true;
+    }
+  });
+
+  if (!hasNameEncode && firstCategoryDimIndex != null) {
+    dimInfoList[firstCategoryDimIndex].otherDims.itemName = 0;
+  }
+
+  return firstCategoryDimIndex;
+}
+/**
+ * Caution: there are side effects to `sourceManager` in this method.
+ * Should better only be called in `Series['getInitialData']`.
+ */
+
+
+function createSeriesData(sourceRaw, seriesModel, opt) {
+  opt = opt || {};
+  var sourceManager = seriesModel.getSourceManager();
+  var source;
+  var isOriginalSource = false;
+
+  if (sourceRaw) {
+    isOriginalSource = true;
+    source = installCanvasRenderer.createSourceFromSeriesDataOption(sourceRaw);
+  } else {
+    source = sourceManager.getSource(); // Is series.data. not dataset.
+
+    isOriginalSource = source.sourceFormat === installCanvasRenderer.SOURCE_FORMAT_ORIGINAL;
+  }
+
+  var coordSysInfo = getCoordSysInfoBySeries(seriesModel);
+  var coordSysDimDefs = getCoordSysDimDefs(seriesModel, coordSysInfo);
+  var useEncodeDefaulter = opt.useEncodeDefaulter;
+  var encodeDefaulter = installCanvasRenderer.isFunction(useEncodeDefaulter) ? useEncodeDefaulter : useEncodeDefaulter ? installCanvasRenderer.curry(installCanvasRenderer.makeSeriesEncodeForAxisCoordSys, coordSysDimDefs, seriesModel) : null;
+  var createDimensionOptions = {
+    coordDimensions: coordSysDimDefs,
+    generateCoord: opt.generateCoord,
+    encodeDefine: seriesModel.getEncode(),
+    encodeDefaulter: encodeDefaulter,
+    canOmitUnusedDimensions: !isOriginalSource
+  };
+  var schema = installCanvasRenderer.prepareSeriesDataSchema(source, createDimensionOptions);
+  var firstCategoryDimIndex = injectOrdinalMeta(schema.dimensions, opt.createInvertedIndices, coordSysInfo);
+  var store = !isOriginalSource ? sourceManager.getSharedDataStore(schema) : null;
+  var stackCalculationInfo = installCanvasRenderer.enableDataStack(seriesModel, {
+    schema: schema,
+    store: store
+  });
+  var data = new installCanvasRenderer.SeriesData(schema, seriesModel);
+  data.setCalculationInfo(stackCalculationInfo);
+  var dimValueGetter = firstCategoryDimIndex != null && isNeedCompleteOrdinalData(source) ? function (itemOpt, dimName, dataIndex, dimIndex) {
+    // Use dataIndex as ordinal value in categoryAxis
+    return dimIndex === firstCategoryDimIndex ? dataIndex : this.defaultDimValueGetter(itemOpt, dimName, dataIndex, dimIndex);
+  } : null;
+  data.hasItemOption = false;
+  data.initData( // Try to reuse the data store in sourceManager if using dataset.
+  isOriginalSource ? source : store, null, dimValueGetter);
+  return data;
+}
+
+function isNeedCompleteOrdinalData(source) {
+  if (source.sourceFormat === installCanvasRenderer.SOURCE_FORMAT_ORIGINAL) {
+    var sampleItem = firstDataNotNull(source.data || []);
+    return !installCanvasRenderer.isArray(installCanvasRenderer.getDataItemValue(sampleItem));
+  }
+}
+
+function firstDataNotNull(arr) {
+  var i = 0;
+
+  while (i < arr.length && arr[i] == null) {
+    i++;
+  }
+
+  return arr[i];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var AxisModelCommonMixin =
+/** @class */
+function () {
+  function AxisModelCommonMixin() {}
+
+  AxisModelCommonMixin.prototype.getNeedCrossZero = function () {
+    var option = this.option;
+    return !option.scale;
+  };
+  /**
+   * Should be implemented by each axis model if necessary.
+   * @return coordinate system model
+   */
+
+
+  AxisModelCommonMixin.prototype.getCoordSysModel = function () {
+    return;
+  };
+
+  return AxisModelCommonMixin;
+}();
+
+var inner$1 = installCanvasRenderer.makeInner();
+function createAxisLabels(axis) {
+  // Only ordinal scale support tick interval
+  return axis.type === 'category' ? makeCategoryLabels(axis) : makeRealNumberLabels(axis);
+}
+/**
+ * @param {module:echats/coord/Axis} axis
+ * @param {module:echarts/model/Model} tickModel For example, can be axisTick, splitLine, splitArea.
+ * @return {Object} {
+ *     ticks: Array.<number>
+ *     tickCategoryInterval: number
+ * }
+ */
+
+function createAxisTicks(axis, tickModel) {
+  // Only ordinal scale support tick interval
+  return axis.type === 'category' ? makeCategoryTicks(axis, tickModel) : {
+    ticks: installCanvasRenderer.map(axis.scale.getTicks(), function (tick) {
+      return tick.value;
+    })
+  };
+}
+
+function makeCategoryLabels(axis) {
+  var labelModel = axis.getLabelModel();
+  var result = makeCategoryLabelsActually(axis, labelModel);
+  return !labelModel.get('show') || axis.scale.isBlank() ? {
+    labels: [],
+    labelCategoryInterval: result.labelCategoryInterval
+  } : result;
+}
+
+function makeCategoryLabelsActually(axis, labelModel) {
+  var labelsCache = getListCache(axis, 'labels');
+  var optionLabelInterval = installCanvasRenderer.getOptionCategoryInterval(labelModel);
+  var result = listCacheGet(labelsCache, optionLabelInterval);
+
+  if (result) {
+    return result;
+  }
+
+  var labels;
+  var numericLabelInterval;
+
+  if (installCanvasRenderer.isFunction(optionLabelInterval)) {
+    labels = makeLabelsByCustomizedCategoryInterval(axis, optionLabelInterval);
+  } else {
+    numericLabelInterval = optionLabelInterval === 'auto' ? makeAutoCategoryInterval(axis) : optionLabelInterval;
+    labels = makeLabelsByNumericCategoryInterval(axis, numericLabelInterval);
+  } // Cache to avoid calling interval function repeatedly.
+
+
+  return listCacheSet(labelsCache, optionLabelInterval, {
+    labels: labels,
+    labelCategoryInterval: numericLabelInterval
+  });
+}
+
+function makeCategoryTicks(axis, tickModel) {
+  var ticksCache = getListCache(axis, 'ticks');
+  var optionTickInterval = installCanvasRenderer.getOptionCategoryInterval(tickModel);
+  var result = listCacheGet(ticksCache, optionTickInterval);
+
+  if (result) {
+    return result;
+  }
+
+  var ticks;
+  var tickCategoryInterval; // Optimize for the case that large category data and no label displayed,
+  // we should not return all ticks.
+
+  if (!tickModel.get('show') || axis.scale.isBlank()) {
+    ticks = [];
+  }
+
+  if (installCanvasRenderer.isFunction(optionTickInterval)) {
+    ticks = makeLabelsByCustomizedCategoryInterval(axis, optionTickInterval, true);
+  } // Always use label interval by default despite label show. Consider this
+  // scenario, Use multiple grid with the xAxis sync, and only one xAxis shows
+  // labels. `splitLine` and `axisTick` should be consistent in this case.
+  else if (optionTickInterval === 'auto') {
+      var labelsResult = makeCategoryLabelsActually(axis, axis.getLabelModel());
+      tickCategoryInterval = labelsResult.labelCategoryInterval;
+      ticks = installCanvasRenderer.map(labelsResult.labels, function (labelItem) {
+        return labelItem.tickValue;
+      });
+    } else {
+      tickCategoryInterval = optionTickInterval;
+      ticks = makeLabelsByNumericCategoryInterval(axis, tickCategoryInterval, true);
+    } // Cache to avoid calling interval function repeatedly.
+
+
+  return listCacheSet(ticksCache, optionTickInterval, {
+    ticks: ticks,
+    tickCategoryInterval: tickCategoryInterval
+  });
+}
+
+function makeRealNumberLabels(axis) {
+  var ticks = axis.scale.getTicks();
+  var labelFormatter = installCanvasRenderer.makeLabelFormatter(axis);
+  return {
+    labels: installCanvasRenderer.map(ticks, function (tick, idx) {
+      return {
+        level: tick.level,
+        formattedLabel: labelFormatter(tick, idx),
+        rawLabel: axis.scale.getLabel(tick),
+        tickValue: tick.value
+      };
+    })
+  };
+}
+
+function getListCache(axis, prop) {
+  // Because key can be a function, and cache size always is small, we use array cache.
+  return inner$1(axis)[prop] || (inner$1(axis)[prop] = []);
+}
+
+function listCacheGet(cache, key) {
+  for (var i = 0; i < cache.length; i++) {
+    if (cache[i].key === key) {
+      return cache[i].value;
+    }
+  }
+}
+
+function listCacheSet(cache, key, value) {
+  cache.push({
+    key: key,
+    value: value
+  });
+  return value;
+}
+
+function makeAutoCategoryInterval(axis) {
+  var result = inner$1(axis).autoInterval;
+  return result != null ? result : inner$1(axis).autoInterval = axis.calculateCategoryInterval();
+}
+/**
+ * Calculate interval for category axis ticks and labels.
+ * To get precise result, at least one of `getRotate` and `isHorizontal`
+ * should be implemented in axis.
+ */
+
+
+function calculateCategoryInterval(axis) {
+  var params = fetchAutoCategoryIntervalCalculationParams(axis);
+  var labelFormatter = installCanvasRenderer.makeLabelFormatter(axis);
+  var rotation = (params.axisRotate - params.labelRotate) / 180 * Math.PI;
+  var ordinalScale = axis.scale;
+  var ordinalExtent = ordinalScale.getExtent(); // Providing this method is for optimization:
+  // avoid generating a long array by `getTicks`
+  // in large category data case.
+
+  var tickCount = ordinalScale.count();
+
+  if (ordinalExtent[1] - ordinalExtent[0] < 1) {
+    return 0;
+  }
+
+  var step = 1; // Simple optimization. Empirical value: tick count should less than 40.
+
+  if (tickCount > 40) {
+    step = Math.max(1, Math.floor(tickCount / 40));
+  }
+
+  var tickValue = ordinalExtent[0];
+  var unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);
+  var unitW = Math.abs(unitSpan * Math.cos(rotation));
+  var unitH = Math.abs(unitSpan * Math.sin(rotation));
+  var maxW = 0;
+  var maxH = 0; // Caution: Performance sensitive for large category data.
+  // Consider dataZoom, we should make appropriate step to avoid O(n) loop.
+
+  for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+    var width = 0;
+    var height = 0; // Not precise, do not consider align and vertical align
+    // and each distance from axis line yet.
+
+    var rect = installCanvasRenderer.getBoundingRect(labelFormatter({
+      value: tickValue
+    }), params.font, 'center', 'top'); // Magic number
+
+    width = rect.width * 1.3;
+    height = rect.height * 1.3; // Min size, void long loop.
+
+    maxW = Math.max(maxW, width, 7);
+    maxH = Math.max(maxH, height, 7);
+  }
+
+  var dw = maxW / unitW;
+  var dh = maxH / unitH; // 0/0 is NaN, 1/0 is Infinity.
+
+  isNaN(dw) && (dw = Infinity);
+  isNaN(dh) && (dh = Infinity);
+  var interval = Math.max(0, Math.floor(Math.min(dw, dh)));
+  var cache = inner$1(axis.model);
+  var axisExtent = axis.getExtent();
+  var lastAutoInterval = cache.lastAutoInterval;
+  var lastTickCount = cache.lastTickCount; // Use cache to keep interval stable while moving zoom window,
+  // otherwise the calculated interval might jitter when the zoom
+  // window size is close to the interval-changing size.
+  // For example, if all of the axis labels are `a, b, c, d, e, f, g`.
+  // The jitter will cause that sometimes the displayed labels are
+  // `a, d, g` (interval: 2) sometimes `a, c, e`(interval: 1).
+
+  if (lastAutoInterval != null && lastTickCount != null && Math.abs(lastAutoInterval - interval) <= 1 && Math.abs(lastTickCount - tickCount) <= 1 // Always choose the bigger one, otherwise the critical
+  // point is not the same when zooming in or zooming out.
+  && lastAutoInterval > interval // If the axis change is caused by chart resize, the cache should not
+  // be used. Otherwise some hidden labels might not be shown again.
+  && cache.axisExtent0 === axisExtent[0] && cache.axisExtent1 === axisExtent[1]) {
+    interval = lastAutoInterval;
+  } // Only update cache if cache not used, otherwise the
+  // changing of interval is too insensitive.
+  else {
+      cache.lastTickCount = tickCount;
+      cache.lastAutoInterval = interval;
+      cache.axisExtent0 = axisExtent[0];
+      cache.axisExtent1 = axisExtent[1];
+    }
+
+  return interval;
+}
+
+function fetchAutoCategoryIntervalCalculationParams(axis) {
+  var labelModel = axis.getLabelModel();
+  return {
+    axisRotate: axis.getRotate ? axis.getRotate() : axis.isHorizontal && !axis.isHorizontal() ? 90 : 0,
+    labelRotate: labelModel.get('rotate') || 0,
+    font: labelModel.getFont()
+  };
+}
+
+function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
+  var labelFormatter = installCanvasRenderer.makeLabelFormatter(axis);
+  var ordinalScale = axis.scale;
+  var ordinalExtent = ordinalScale.getExtent();
+  var labelModel = axis.getLabelModel();
+  var result = []; // TODO: axisType: ordinalTime, pick the tick from each month/day/year/...
+
+  var step = Math.max((categoryInterval || 0) + 1, 1);
+  var startTick = ordinalExtent[0];
+  var tickCount = ordinalScale.count(); // Calculate start tick based on zero if possible to keep label consistent
+  // while zooming and moving while interval > 0. Otherwise the selection
+  // of displayable ticks and symbols probably keep changing.
+  // 3 is empirical value.
+
+  if (startTick !== 0 && step > 1 && tickCount / step > 2) {
+    startTick = Math.round(Math.ceil(startTick / step) * step);
+  } // (1) Only add min max label here but leave overlap checking
+  // to render stage, which also ensure the returned list
+  // suitable for splitLine and splitArea rendering.
+  // (2) Scales except category always contain min max label so
+  // do not need to perform this process.
+
+
+  var showAllLabel = installCanvasRenderer.shouldShowAllLabels(axis);
+  var includeMinLabel = labelModel.get('showMinLabel') || showAllLabel;
+  var includeMaxLabel = labelModel.get('showMaxLabel') || showAllLabel;
+
+  if (includeMinLabel && startTick !== ordinalExtent[0]) {
+    addItem(ordinalExtent[0]);
+  } // Optimize: avoid generating large array by `ordinalScale.getTicks()`.
+
+
+  var tickValue = startTick;
+
+  for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+    addItem(tickValue);
+  }
+
+  if (includeMaxLabel && tickValue - step !== ordinalExtent[1]) {
+    addItem(ordinalExtent[1]);
+  }
+
+  function addItem(tickValue) {
+    var tickObj = {
+      value: tickValue
+    };
+    result.push(onlyTick ? tickValue : {
+      formattedLabel: labelFormatter(tickObj),
+      rawLabel: ordinalScale.getLabel(tickObj),
+      tickValue: tickValue
+    });
+  }
+
+  return result;
+}
+
+function makeLabelsByCustomizedCategoryInterval(axis, categoryInterval, onlyTick) {
+  var ordinalScale = axis.scale;
+  var labelFormatter = installCanvasRenderer.makeLabelFormatter(axis);
+  var result = [];
+  installCanvasRenderer.each(ordinalScale.getTicks(), function (tick) {
+    var rawLabel = ordinalScale.getLabel(tick);
+    var tickValue = tick.value;
+
+    if (categoryInterval(tick.value, rawLabel)) {
+      result.push(onlyTick ? tickValue : {
+        formattedLabel: labelFormatter(tick),
+        rawLabel: rawLabel,
+        tickValue: tickValue
+      });
+    }
+  });
+  return result;
+}
+
+var NORMALIZED_EXTENT = [0, 1];
+/**
+ * Base class of Axis.
+ */
+
+var Axis =
+/** @class */
+function () {
+  function Axis(dim, scale, extent) {
+    this.onBand = false;
+    this.inverse = false;
+    this.dim = dim;
+    this.scale = scale;
+    this._extent = extent || [0, 0];
+  }
+  /**
+   * If axis extent contain given coord
+   */
+
+
+  Axis.prototype.contain = function (coord) {
+    var extent = this._extent;
+    var min = Math.min(extent[0], extent[1]);
+    var max = Math.max(extent[0], extent[1]);
+    return coord >= min && coord <= max;
+  };
+  /**
+   * If axis extent contain given data
+   */
+
+
+  Axis.prototype.containData = function (data) {
+    return this.scale.contain(data);
+  };
+  /**
+   * Get coord extent.
+   */
+
+
+  Axis.prototype.getExtent = function () {
+    return this._extent.slice();
+  };
+  /**
+   * Get precision used for formatting
+   */
+
+
+  Axis.prototype.getPixelPrecision = function (dataExtent) {
+    return installCanvasRenderer.getPixelPrecision(dataExtent || this.scale.getExtent(), this._extent);
+  };
+  /**
+   * Set coord extent
+   */
+
+
+  Axis.prototype.setExtent = function (start, end) {
+    var extent = this._extent;
+    extent[0] = start;
+    extent[1] = end;
+  };
+  /**
+   * Convert data to coord. Data is the rank if it has an ordinal scale
+   */
+
+
+  Axis.prototype.dataToCoord = function (data, clamp) {
+    var extent = this._extent;
+    var scale = this.scale;
+    data = scale.normalize(data);
+
+    if (this.onBand && scale.type === 'ordinal') {
+      extent = extent.slice();
+      fixExtentWithBands(extent, scale.count());
+    }
+
+    return installCanvasRenderer.linearMap(data, NORMALIZED_EXTENT, extent, clamp);
+  };
+  /**
+   * Convert coord to data. Data is the rank if it has an ordinal scale
+   */
+
+
+  Axis.prototype.coordToData = function (coord, clamp) {
+    var extent = this._extent;
+    var scale = this.scale;
+
+    if (this.onBand && scale.type === 'ordinal') {
+      extent = extent.slice();
+      fixExtentWithBands(extent, scale.count());
+    }
+
+    var t = installCanvasRenderer.linearMap(coord, extent, NORMALIZED_EXTENT, clamp);
+    return this.scale.scale(t);
+  };
+  /**
+   * Convert pixel point to data in axis
+   */
+
+
+  Axis.prototype.pointToData = function (point, clamp) {
+    // Should be implemented in derived class if necessary.
+    return;
+  };
+  /**
+   * Different from `zrUtil.map(axis.getTicks(), axis.dataToCoord, axis)`,
+   * `axis.getTicksCoords` considers `onBand`, which is used by
+   * `boundaryGap:true` of category axis and splitLine and splitArea.
+   * @param opt.tickModel default: axis.model.getModel('axisTick')
+   * @param opt.clamp If `true`, the first and the last
+   *        tick must be at the axis end points. Otherwise, clip ticks
+   *        that outside the axis extent.
+   */
+
+
+  Axis.prototype.getTicksCoords = function (opt) {
+    opt = opt || {};
+    var tickModel = opt.tickModel || this.getTickModel();
+    var result = createAxisTicks(this, tickModel);
+    var ticks = result.ticks;
+    var ticksCoords = installCanvasRenderer.map(ticks, function (tickVal) {
+      return {
+        coord: this.dataToCoord(this.scale.type === 'ordinal' ? this.scale.getRawOrdinalNumber(tickVal) : tickVal),
+        tickValue: tickVal
+      };
+    }, this);
+    var alignWithLabel = tickModel.get('alignWithLabel');
+    fixOnBandTicksCoords(this, ticksCoords, alignWithLabel, opt.clamp);
+    return ticksCoords;
+  };
+
+  Axis.prototype.getMinorTicksCoords = function () {
+    if (this.scale.type === 'ordinal') {
+      // Category axis doesn't support minor ticks
+      return [];
+    }
+
+    var minorTickModel = this.model.getModel('minorTick');
+    var splitNumber = minorTickModel.get('splitNumber'); // Protection.
+
+    if (!(splitNumber > 0 && splitNumber < 100)) {
+      splitNumber = 5;
+    }
+
+    var minorTicks = this.scale.getMinorTicks(splitNumber);
+    var minorTicksCoords = installCanvasRenderer.map(minorTicks, function (minorTicksGroup) {
+      return installCanvasRenderer.map(minorTicksGroup, function (minorTick) {
+        return {
+          coord: this.dataToCoord(minorTick),
+          tickValue: minorTick
+        };
+      }, this);
+    }, this);
+    return minorTicksCoords;
+  };
+
+  Axis.prototype.getViewLabels = function () {
+    return createAxisLabels(this).labels;
+  };
+
+  Axis.prototype.getLabelModel = function () {
+    return this.model.getModel('axisLabel');
+  };
+  /**
+   * Notice here we only get the default tick model. For splitLine
+   * or splitArea, we should pass the splitLineModel or splitAreaModel
+   * manually when calling `getTicksCoords`.
+   * In GL, this method may be overridden to:
+   * `axisModel.getModel('axisTick', grid3DModel.getModel('axisTick'));`
+   */
+
+
+  Axis.prototype.getTickModel = function () {
+    return this.model.getModel('axisTick');
+  };
+  /**
+   * Get width of band
+   */
+
+
+  Axis.prototype.getBandWidth = function () {
+    var axisExtent = this._extent;
+    var dataExtent = this.scale.getExtent();
+    var len = dataExtent[1] - dataExtent[0] + (this.onBand ? 1 : 0); // Fix #2728, avoid NaN when only one data.
+
+    len === 0 && (len = 1);
+    var size = Math.abs(axisExtent[1] - axisExtent[0]);
+    return Math.abs(size) / len;
+  };
+  /**
+   * Only be called in category axis.
+   * Can be overridden, consider other axes like in 3D.
+   * @return Auto interval for cateogry axis tick and label
+   */
+
+
+  Axis.prototype.calculateCategoryInterval = function () {
+    return calculateCategoryInterval(this);
+  };
+
+  return Axis;
+}();
+
+function fixExtentWithBands(extent, nTick) {
+  var size = extent[1] - extent[0];
+  var len = nTick;
+  var margin = size / len / 2;
+  extent[0] += margin;
+  extent[1] -= margin;
+} // If axis has labels [1, 2, 3, 4]. Bands on the axis are
+// |---1---|---2---|---3---|---4---|.
+// So the displayed ticks and splitLine/splitArea should between
+// each data item, otherwise cause misleading (e.g., split tow bars
+// of a single data item when there are two bar series).
+// Also consider if tickCategoryInterval > 0 and onBand, ticks and
+// splitLine/spliteArea should layout appropriately corresponding
+// to displayed labels. (So we should not use `getBandWidth` in this
+// case).
+
+
+function fixOnBandTicksCoords(axis, ticksCoords, alignWithLabel, clamp) {
+  var ticksLen = ticksCoords.length;
+
+  if (!axis.onBand || alignWithLabel || !ticksLen) {
+    return;
+  }
+
+  var axisExtent = axis.getExtent();
+  var last;
+  var diffSize;
+
+  if (ticksLen === 1) {
+    ticksCoords[0].coord = axisExtent[0];
+    last = ticksCoords[1] = {
+      coord: axisExtent[0]
+    };
+  } else {
+    var crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
+    var shift_1 = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;
+    installCanvasRenderer.each(ticksCoords, function (ticksItem) {
+      ticksItem.coord -= shift_1 / 2;
+    });
+    var dataExtent = axis.scale.getExtent();
+    diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue;
+    last = {
+      coord: ticksCoords[ticksLen - 1].coord + shift_1 * diffSize
+    };
+    ticksCoords.push(last);
+  }
+
+  var inverse = axisExtent[0] > axisExtent[1]; // Handling clamp.
+
+  if (littleThan(ticksCoords[0].coord, axisExtent[0])) {
+    clamp ? ticksCoords[0].coord = axisExtent[0] : ticksCoords.shift();
+  }
+
+  if (clamp && littleThan(axisExtent[0], ticksCoords[0].coord)) {
+    ticksCoords.unshift({
+      coord: axisExtent[0]
+    });
+  }
+
+  if (littleThan(axisExtent[1], last.coord)) {
+    clamp ? last.coord = axisExtent[1] : ticksCoords.pop();
+  }
+
+  if (clamp && littleThan(last.coord, axisExtent[1])) {
+    ticksCoords.push({
+      coord: axisExtent[1]
+    });
+  }
+
+  function littleThan(a, b) {
+    // Avoid rounding error cause calculated tick coord different with extent.
+    // It may cause an extra unnecessary tick added.
+    a = installCanvasRenderer.round(a);
+    b = installCanvasRenderer.round(b);
+    return inverse ? a > b : a < b;
+  }
+}
+
+var GridModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(GridModel, _super);
+
+  function GridModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  GridModel.type = 'grid';
+  GridModel.dependencies = ['xAxis', 'yAxis'];
+  GridModel.layoutMode = 'box';
+  GridModel.defaultOption = {
+    show: false,
+    // zlevel: 0,
+    z: 0,
+    left: '10%',
+    top: 60,
+    right: '10%',
+    bottom: 70,
+    // If grid size contain label
+    containLabel: false,
+    // width: {totalWidth} - left - right,
+    // height: {totalHeight} - top - bottom,
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderWidth: 1,
+    borderColor: '#ccc'
+  };
+  return GridModel;
+}(installCanvasRenderer.ComponentModel);
+
+var CartesianAxisModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(CartesianAxisModel, _super);
+
+  function CartesianAxisModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  CartesianAxisModel.prototype.getCoordSysModel = function () {
+    return this.getReferringComponents('grid', installCanvasRenderer.SINGLE_REFERRING).models[0];
+  };
+
+  CartesianAxisModel.type = 'cartesian2dAxis';
+  return CartesianAxisModel;
+}(installCanvasRenderer.ComponentModel);
+installCanvasRenderer.mixin(CartesianAxisModel, AxisModelCommonMixin);
+
+var defaultOption = {
+  show: true,
+  // zlevel: 0,
+  z: 0,
+  // Inverse the axis.
+  inverse: false,
+  // Axis name displayed.
+  name: '',
+  // 'start' | 'middle' | 'end'
+  nameLocation: 'end',
+  // By degree. By default auto rotate by nameLocation.
+  nameRotate: null,
+  nameTruncate: {
+    maxWidth: null,
+    ellipsis: '...',
+    placeholder: '.'
+  },
+  // Use global text style by default.
+  nameTextStyle: {},
+  // The gap between axisName and axisLine.
+  nameGap: 15,
+  // Default `false` to support tooltip.
+  silent: false,
+  // Default `false` to avoid legacy user event listener fail.
+  triggerEvent: false,
+  tooltip: {
+    show: false
+  },
+  axisPointer: {},
+  axisLine: {
+    show: true,
+    onZero: true,
+    onZeroAxisIndex: null,
+    lineStyle: {
+      color: '#6E7079',
+      width: 1,
+      type: 'solid'
+    },
+    // The arrow at both ends the the axis.
+    symbol: ['none', 'none'],
+    symbolSize: [10, 15]
+  },
+  axisTick: {
+    show: true,
+    // Whether axisTick is inside the grid or outside the grid.
+    inside: false,
+    // The length of axisTick.
+    length: 5,
+    lineStyle: {
+      width: 1
+    }
+  },
+  axisLabel: {
+    show: true,
+    // Whether axisLabel is inside the grid or outside the grid.
+    inside: false,
+    rotate: 0,
+    // true | false | null/undefined (auto)
+    showMinLabel: null,
+    // true | false | null/undefined (auto)
+    showMaxLabel: null,
+    margin: 8,
+    // formatter: null,
+    fontSize: 12
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: ['#E0E6F1'],
+      width: 1,
+      type: 'solid'
+    }
+  },
+  splitArea: {
+    show: false,
+    areaStyle: {
+      color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+    }
+  }
+};
+var categoryAxis = installCanvasRenderer.merge({
+  // The gap at both ends of the axis. For categoryAxis, boolean.
+  boundaryGap: true,
+  // Set false to faster category collection.
+  deduplication: null,
+  // splitArea: {
+  // show: false
+  // },
+  splitLine: {
+    show: false
+  },
+  axisTick: {
+    // If tick is align with label when boundaryGap is true
+    alignWithLabel: false,
+    interval: 'auto'
+  },
+  axisLabel: {
+    interval: 'auto'
+  }
+}, defaultOption);
+var valueAxis = installCanvasRenderer.merge({
+  boundaryGap: [0, 0],
+  axisLine: {
+    // Not shown when other axis is categoryAxis in cartesian
+    show: 'auto'
+  },
+  axisTick: {
+    // Not shown when other axis is categoryAxis in cartesian
+    show: 'auto'
+  },
+  // TODO
+  // min/max: [30, datamin, 60] or [20, datamin] or [datamin, 60]
+  splitNumber: 5,
+  minorTick: {
+    // Minor tick, not available for cateogry axis.
+    show: false,
+    // Split number of minor ticks. The value should be in range of (0, 100)
+    splitNumber: 5,
+    // Length of minor tick
+    length: 3,
+    // Line style
+    lineStyle: {// Default to be same with axisTick
+    }
+  },
+  minorSplitLine: {
+    show: false,
+    lineStyle: {
+      color: '#F4F7FD',
+      width: 1
+    }
+  }
+}, defaultOption);
+var timeAxis = installCanvasRenderer.merge({
+  splitNumber: 6,
+  axisLabel: {
+    // To eliminate labels that are not nice
+    showMinLabel: false,
+    showMaxLabel: false,
+    rich: {
+      primary: {
+        fontWeight: 'bold'
+      }
+    }
+  },
+  splitLine: {
+    show: false
+  }
+}, valueAxis);
+var logAxis = installCanvasRenderer.defaults({
+  logBase: 10
+}, valueAxis);
+const axisDefault = {
+  category: categoryAxis,
+  value: valueAxis,
+  time: timeAxis,
+  log: logAxis
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var AXIS_TYPES = {
+  value: 1,
+  category: 1,
+  time: 1,
+  log: 1
+};
+
+/**
+ * Generate sub axis model class
+ * @param axisName 'x' 'y' 'radius' 'angle' 'parallel' ...
+ */
+
+function axisModelCreator(registers, axisName, BaseAxisModelClass, extraDefaultOption) {
+  installCanvasRenderer.each(AXIS_TYPES, function (v, axisType) {
+    var defaultOption = installCanvasRenderer.merge(installCanvasRenderer.merge({}, axisDefault[axisType], true), extraDefaultOption, true);
+
+    var AxisModel =
+    /** @class */
+    function (_super) {
+      installCanvasRenderer.__extends(AxisModel, _super);
+
+      function AxisModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+
+        _this.type = axisName + 'Axis.' + axisType;
+        return _this;
+      }
+
+      AxisModel.prototype.mergeDefaultAndTheme = function (option, ecModel) {
+        var layoutMode = installCanvasRenderer.fetchLayoutMode(this);
+        var inputPositionParams = layoutMode ? installCanvasRenderer.getLayoutParams(option) : {};
+        var themeModel = ecModel.getTheme();
+        installCanvasRenderer.merge(option, themeModel.get(axisType + 'Axis'));
+        installCanvasRenderer.merge(option, this.getDefaultOption());
+        option.type = getAxisType(option);
+
+        if (layoutMode) {
+          installCanvasRenderer.mergeLayoutParam(option, inputPositionParams, layoutMode);
+        }
+      };
+
+      AxisModel.prototype.optionUpdated = function () {
+        var thisOption = this.option;
+
+        if (thisOption.type === 'category') {
+          this.__ordinalMeta = installCanvasRenderer.OrdinalMeta.createByAxisModel(this);
+        }
+      };
+      /**
+       * Should not be called before all of 'getInitailData' finished.
+       * Because categories are collected during initializing data.
+       */
+
+
+      AxisModel.prototype.getCategories = function (rawData) {
+        var option = this.option; // FIXME
+        // warning if called before all of 'getInitailData' finished.
+
+        if (option.type === 'category') {
+          if (rawData) {
+            return option.data;
+          }
+
+          return this.__ordinalMeta.categories;
+        }
+      };
+
+      AxisModel.prototype.getOrdinalMeta = function () {
+        return this.__ordinalMeta;
+      };
+
+      AxisModel.type = axisName + 'Axis.' + axisType;
+      AxisModel.defaultOption = defaultOption;
+      return AxisModel;
+    }(BaseAxisModelClass);
+
+    registers.registerComponentModel(AxisModel);
+  });
+  registers.registerSubTypeDefaulter(axisName + 'Axis', getAxisType);
+}
+
+function getAxisType(option) {
+  // Default axis with data is category axis
+  return option.type || (option.data ? 'category' : 'value');
+}
+
+var Cartesian =
+/** @class */
+function () {
+  function Cartesian(name) {
+    this.type = 'cartesian';
+    this._dimList = [];
+    this._axes = {};
+    this.name = name || '';
+  }
+
+  Cartesian.prototype.getAxis = function (dim) {
+    return this._axes[dim];
+  };
+
+  Cartesian.prototype.getAxes = function () {
+    return installCanvasRenderer.map(this._dimList, function (dim) {
+      return this._axes[dim];
+    }, this);
+  };
+
+  Cartesian.prototype.getAxesByScale = function (scaleType) {
+    scaleType = scaleType.toLowerCase();
+    return installCanvasRenderer.filter(this.getAxes(), function (axis) {
+      return axis.scale.type === scaleType;
+    });
+  };
+
+  Cartesian.prototype.addAxis = function (axis) {
+    var dim = axis.dim;
+    this._axes[dim] = axis;
+
+    this._dimList.push(dim);
+  };
+
+  return Cartesian;
+}();
+
+var cartesian2DDimensions = ['x', 'y'];
+
+function canCalculateAffineTransform(scale) {
+  return scale.type === 'interval' || scale.type === 'time';
+}
+
+var Cartesian2D =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(Cartesian2D, _super);
+
+  function Cartesian2D() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = 'cartesian2d';
+    _this.dimensions = cartesian2DDimensions;
+    return _this;
+  }
+  /**
+   * Calculate an affine transform matrix if two axes are time or value.
+   * It's mainly for accelartion on the large time series data.
+   */
+
+
+  Cartesian2D.prototype.calcAffineTransform = function () {
+    this._transform = this._invTransform = null;
+    var xAxisScale = this.getAxis('x').scale;
+    var yAxisScale = this.getAxis('y').scale;
+
+    if (!canCalculateAffineTransform(xAxisScale) || !canCalculateAffineTransform(yAxisScale)) {
+      return;
+    }
+
+    var xScaleExtent = xAxisScale.getExtent();
+    var yScaleExtent = yAxisScale.getExtent();
+    var start = this.dataToPoint([xScaleExtent[0], yScaleExtent[0]]);
+    var end = this.dataToPoint([xScaleExtent[1], yScaleExtent[1]]);
+    var xScaleSpan = xScaleExtent[1] - xScaleExtent[0];
+    var yScaleSpan = yScaleExtent[1] - yScaleExtent[0];
+
+    if (!xScaleSpan || !yScaleSpan) {
+      return;
+    } // Accelerate data to point calculation on the special large time series data.
+
+
+    var scaleX = (end[0] - start[0]) / xScaleSpan;
+    var scaleY = (end[1] - start[1]) / yScaleSpan;
+    var translateX = start[0] - xScaleExtent[0] * scaleX;
+    var translateY = start[1] - yScaleExtent[0] * scaleY;
+    var m = this._transform = [scaleX, 0, 0, scaleY, translateX, translateY];
+    this._invTransform = installCanvasRenderer.invert([], m);
+  };
+  /**
+   * Base axis will be used on stacking.
+   */
+
+
+  Cartesian2D.prototype.getBaseAxis = function () {
+    return this.getAxesByScale('ordinal')[0] || this.getAxesByScale('time')[0] || this.getAxis('x');
+  };
+
+  Cartesian2D.prototype.containPoint = function (point) {
+    var axisX = this.getAxis('x');
+    var axisY = this.getAxis('y');
+    return axisX.contain(axisX.toLocalCoord(point[0])) && axisY.contain(axisY.toLocalCoord(point[1]));
+  };
+
+  Cartesian2D.prototype.containData = function (data) {
+    return this.getAxis('x').containData(data[0]) && this.getAxis('y').containData(data[1]);
+  };
+
+  Cartesian2D.prototype.containZone = function (data1, data2) {
+    var zoneDiag1 = this.dataToPoint(data1);
+    var zoneDiag2 = this.dataToPoint(data2);
+    var area = this.getArea();
+    var zone = new installCanvasRenderer.BoundingRect(zoneDiag1[0], zoneDiag1[1], zoneDiag2[0] - zoneDiag1[0], zoneDiag2[1] - zoneDiag1[1]);
+    return area.intersect(zone);
+  };
+
+  Cartesian2D.prototype.dataToPoint = function (data, clamp, out) {
+    out = out || [];
+    var xVal = data[0];
+    var yVal = data[1]; // Fast path
+
+    if (this._transform // It's supported that if data is like `[Inifity, 123]`, where only Y pixel calculated.
+    && xVal != null && isFinite(xVal) && yVal != null && isFinite(yVal)) {
+      return installCanvasRenderer.applyTransform(out, data, this._transform);
+    }
+
+    var xAxis = this.getAxis('x');
+    var yAxis = this.getAxis('y');
+    out[0] = xAxis.toGlobalCoord(xAxis.dataToCoord(xVal, clamp));
+    out[1] = yAxis.toGlobalCoord(yAxis.dataToCoord(yVal, clamp));
+    return out;
+  };
+
+  Cartesian2D.prototype.clampData = function (data, out) {
+    var xScale = this.getAxis('x').scale;
+    var yScale = this.getAxis('y').scale;
+    var xAxisExtent = xScale.getExtent();
+    var yAxisExtent = yScale.getExtent();
+    var x = xScale.parse(data[0]);
+    var y = yScale.parse(data[1]);
+    out = out || [];
+    out[0] = Math.min(Math.max(Math.min(xAxisExtent[0], xAxisExtent[1]), x), Math.max(xAxisExtent[0], xAxisExtent[1]));
+    out[1] = Math.min(Math.max(Math.min(yAxisExtent[0], yAxisExtent[1]), y), Math.max(yAxisExtent[0], yAxisExtent[1]));
+    return out;
+  };
+
+  Cartesian2D.prototype.pointToData = function (point, clamp) {
+    var out = [];
+
+    if (this._invTransform) {
+      return installCanvasRenderer.applyTransform(out, point, this._invTransform);
+    }
+
+    var xAxis = this.getAxis('x');
+    var yAxis = this.getAxis('y');
+    out[0] = xAxis.coordToData(xAxis.toLocalCoord(point[0]), clamp);
+    out[1] = yAxis.coordToData(yAxis.toLocalCoord(point[1]), clamp);
+    return out;
+  };
+
+  Cartesian2D.prototype.getOtherAxis = function (axis) {
+    return this.getAxis(axis.dim === 'x' ? 'y' : 'x');
+  };
+  /**
+   * Get rect area of cartesian.
+   * Area will have a contain function to determine if a point is in the coordinate system.
+   */
+
+
+  Cartesian2D.prototype.getArea = function () {
+    var xExtent = this.getAxis('x').getGlobalExtent();
+    var yExtent = this.getAxis('y').getGlobalExtent();
+    var x = Math.min(xExtent[0], xExtent[1]);
+    var y = Math.min(yExtent[0], yExtent[1]);
+    var width = Math.max(xExtent[0], xExtent[1]) - x;
+    var height = Math.max(yExtent[0], yExtent[1]) - y;
+    return new installCanvasRenderer.BoundingRect(x, y, width, height);
+  };
+
+  return Cartesian2D;
+}(Cartesian);
+
+var Axis2D =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(Axis2D, _super);
+
+  function Axis2D(dim, scale, coordExtent, axisType, position) {
+    var _this = _super.call(this, dim, scale, coordExtent) || this;
+    /**
+     * Index of axis, can be used as key
+     * Injected outside.
+     */
+
+
+    _this.index = 0;
+    _this.type = axisType || 'value';
+    _this.position = position || 'bottom';
+    return _this;
+  }
+
+  Axis2D.prototype.isHorizontal = function () {
+    var position = this.position;
+    return position === 'top' || position === 'bottom';
+  };
+  /**
+   * Each item cooresponds to this.getExtent(), which
+   * means globalExtent[0] may greater than globalExtent[1],
+   * unless `asc` is input.
+   *
+   * @param {boolean} [asc]
+   * @return {Array.<number>}
+   */
+
+
+  Axis2D.prototype.getGlobalExtent = function (asc) {
+    var ret = this.getExtent();
+    ret[0] = this.toGlobalCoord(ret[0]);
+    ret[1] = this.toGlobalCoord(ret[1]);
+    asc && ret[0] > ret[1] && ret.reverse();
+    return ret;
+  };
+
+  Axis2D.prototype.pointToData = function (point, clamp) {
+    return this.coordToData(this.toLocalCoord(point[this.dim === 'x' ? 0 : 1]), clamp);
+  };
+  /**
+   * Set ordinalSortInfo
+   * @param info new OrdinalSortInfo
+   */
+
+
+  Axis2D.prototype.setCategorySortInfo = function (info) {
+    if (this.type !== 'category') {
+      return false;
+    }
+
+    this.model.option.categorySortInfo = info;
+    this.scale.setSortInfo(info);
+  };
+
+  return Axis2D;
+}(Axis);
+
+var mathLog = Math.log;
+function alignScaleTicks(scale, axisModel, alignToScale) {
+  var intervalScaleProto = installCanvasRenderer.IntervalScale.prototype; // NOTE: There is a precondition for log scale  here:
+  // In log scale we store _interval and _extent of exponent value.
+  // So if we use the method of InternalScale to set/get these data.
+  // It process the exponent value, which is linear and what we want here.
+
+  var alignToTicks = intervalScaleProto.getTicks.call(alignToScale);
+  var alignToNicedTicks = intervalScaleProto.getTicks.call(alignToScale, true);
+  var alignToSplitNumber = alignToTicks.length - 1;
+  var alignToInterval = intervalScaleProto.getInterval.call(alignToScale);
+  var scaleExtent = installCanvasRenderer.getScaleExtent(scale, axisModel);
+  var rawExtent = scaleExtent.extent;
+  var isMinFixed = scaleExtent.fixMin;
+  var isMaxFixed = scaleExtent.fixMax;
+
+  if (scale.type === 'log') {
+    var logBase = mathLog(scale.base);
+    rawExtent = [mathLog(rawExtent[0]) / logBase, mathLog(rawExtent[1]) / logBase];
+  }
+
+  scale.setExtent(rawExtent[0], rawExtent[1]);
+  scale.calcNiceExtent({
+    splitNumber: alignToSplitNumber,
+    fixMin: isMinFixed,
+    fixMax: isMaxFixed
+  });
+  var extent = intervalScaleProto.getExtent.call(scale); // Need to update the rawExtent.
+  // Because value in rawExtent may be not parsed. e.g. 'dataMin', 'dataMax'
+
+  if (isMinFixed) {
+    rawExtent[0] = extent[0];
+  }
+
+  if (isMaxFixed) {
+    rawExtent[1] = extent[1];
+  }
+
+  var interval = intervalScaleProto.getInterval.call(scale);
+  var min = rawExtent[0];
+  var max = rawExtent[1];
+
+  if (isMinFixed && isMaxFixed) {
+    // User set min, max, divide to get new interval
+    interval = (max - min) / alignToSplitNumber;
+  } else if (isMinFixed) {
+    max = rawExtent[0] + interval * alignToSplitNumber; // User set min, expand extent on the other side
+
+    while (max < rawExtent[1] && isFinite(max) && isFinite(rawExtent[1])) {
+      interval = installCanvasRenderer.increaseInterval(interval);
+      max = rawExtent[0] + interval * alignToSplitNumber;
+    }
+  } else if (isMaxFixed) {
+    // User set max, expand extent on the other side
+    min = rawExtent[1] - interval * alignToSplitNumber;
+
+    while (min > rawExtent[0] && isFinite(min) && isFinite(rawExtent[0])) {
+      interval = installCanvasRenderer.increaseInterval(interval);
+      min = rawExtent[1] - interval * alignToSplitNumber;
+    }
+  } else {
+    var nicedSplitNumber = scale.getTicks().length - 1;
+
+    if (nicedSplitNumber > alignToSplitNumber) {
+      interval = installCanvasRenderer.increaseInterval(interval);
+    }
+
+    var range = interval * alignToSplitNumber;
+    max = Math.ceil(rawExtent[1] / interval) * interval;
+    min = installCanvasRenderer.round(max - range); // Not change the result that crossing zero.
+
+    if (min < 0 && rawExtent[0] >= 0) {
+      min = 0;
+      max = installCanvasRenderer.round(range);
+    } else if (max > 0 && rawExtent[1] <= 0) {
+      max = 0;
+      min = -installCanvasRenderer.round(range);
+    }
+  } // Adjust min, max based on the extent of alignTo. When min or max is set in alignTo scale
+
+
+  var t0 = (alignToTicks[0].value - alignToNicedTicks[0].value) / alignToInterval;
+  var t1 = (alignToTicks[alignToSplitNumber].value - alignToNicedTicks[alignToSplitNumber].value) / alignToInterval; // NOTE: Must in setExtent -> setInterval -> setNiceExtent order.
+
+  intervalScaleProto.setExtent.call(scale, min + interval * t0, max + interval * t1);
+  intervalScaleProto.setInterval.call(scale, interval);
+
+  if (t0 || t1) {
+    intervalScaleProto.setNiceExtent.call(scale, min + interval, max - interval);
+  }
+}
+
+var Grid =
+/** @class */
+function () {
+  function Grid(gridModel, ecModel, api) {
+    // FIXME:TS where used (different from registered type 'cartesian2d')?
+    this.type = 'grid';
+    this._coordsMap = {};
+    this._coordsList = [];
+    this._axesMap = {};
+    this._axesList = [];
+    this.axisPointerEnabled = true;
+    this.dimensions = cartesian2DDimensions;
+
+    this._initCartesian(gridModel, ecModel, api);
+
+    this.model = gridModel;
+  }
+
+  Grid.prototype.getRect = function () {
+    return this._rect;
+  };
+
+  Grid.prototype.update = function (ecModel, api) {
+    var axesMap = this._axesMap;
+
+    this._updateScale(ecModel, this.model);
+
+    function updateAxisTicks(axes) {
+      var alignTo; // Axis is added in order of axisIndex.
+
+      var axesIndices = installCanvasRenderer.keys(axes);
+      var len = axesIndices.length;
+
+      if (!len) {
+        return;
+      }
+
+      var axisNeedsAlign = []; // Process once and calculate the ticks for those don't use alignTicks.
+
+      for (var i = len - 1; i >= 0; i--) {
+        var idx = +axesIndices[i]; // Convert to number.
+
+        var axis = axes[idx];
+        var model = axis.model;
+        var scale = axis.scale;
+
+        if ( // Only value and log axis without interval support alignTicks.
+        installCanvasRenderer.isIntervalOrLogScale(scale) && model.get('alignTicks') && model.get('interval') == null) {
+          axisNeedsAlign.push(axis);
+        } else {
+          installCanvasRenderer.niceScaleExtent(scale, model);
+
+          if (installCanvasRenderer.isIntervalOrLogScale(scale)) {
+            // Can only align to interval or log axis.
+            alignTo = axis;
+          }
+        }
+      }
+      // PENDING. Should we find the axis that both set interval, min, max and align to this one?
+
+      if (axisNeedsAlign.length) {
+        if (!alignTo) {
+          alignTo = axisNeedsAlign.pop();
+          installCanvasRenderer.niceScaleExtent(alignTo.scale, alignTo.model);
+        }
+
+        installCanvasRenderer.each(axisNeedsAlign, function (axis) {
+          alignScaleTicks(axis.scale, axis.model, alignTo.scale);
+        });
+      }
+    }
+
+    updateAxisTicks(axesMap.x);
+    updateAxisTicks(axesMap.y); // Key: axisDim_axisIndex, value: boolean, whether onZero target.
+
+    var onZeroRecords = {};
+    installCanvasRenderer.each(axesMap.x, function (xAxis) {
+      fixAxisOnZero(axesMap, 'y', xAxis, onZeroRecords);
+    });
+    installCanvasRenderer.each(axesMap.y, function (yAxis) {
+      fixAxisOnZero(axesMap, 'x', yAxis, onZeroRecords);
+    }); // Resize again if containLabel is enabled
+    // FIXME It may cause getting wrong grid size in data processing stage
+
+    this.resize(this.model, api);
+  };
+  /**
+   * Resize the grid
+   */
+
+
+  Grid.prototype.resize = function (gridModel, api, ignoreContainLabel) {
+    var boxLayoutParams = gridModel.getBoxLayoutParams();
+    var isContainLabel = !ignoreContainLabel && gridModel.get('containLabel');
+    var gridRect = installCanvasRenderer.getLayoutRect(boxLayoutParams, {
+      width: api.getWidth(),
+      height: api.getHeight()
+    });
+    this._rect = gridRect;
+    var axesList = this._axesList;
+    adjustAxes(); // Minus label size
+
+    if (isContainLabel) {
+      installCanvasRenderer.each(axesList, function (axis) {
+        if (!axis.model.get(['axisLabel', 'inside'])) {
+          var labelUnionRect = installCanvasRenderer.estimateLabelUnionRect(axis);
+
+          if (labelUnionRect) {
+            var dim = axis.isHorizontal() ? 'height' : 'width';
+            var margin = axis.model.get(['axisLabel', 'margin']);
+            gridRect[dim] -= labelUnionRect[dim] + margin;
+
+            if (axis.position === 'top') {
+              gridRect.y += labelUnionRect.height + margin;
+            } else if (axis.position === 'left') {
+              gridRect.x += labelUnionRect.width + margin;
+            }
+          }
+        }
+      });
+      adjustAxes();
+    }
+
+    installCanvasRenderer.each(this._coordsList, function (coord) {
+      // Calculate affine matrix to accelerate the data to point transform.
+      // If all the axes scales are time or value.
+      coord.calcAffineTransform();
+    });
+
+    function adjustAxes() {
+      installCanvasRenderer.each(axesList, function (axis) {
+        var isHorizontal = axis.isHorizontal();
+        var extent = isHorizontal ? [0, gridRect.width] : [0, gridRect.height];
+        var idx = axis.inverse ? 1 : 0;
+        axis.setExtent(extent[idx], extent[1 - idx]);
+        updateAxisTransform(axis, isHorizontal ? gridRect.x : gridRect.y);
+      });
+    }
+  };
+
+  Grid.prototype.getAxis = function (dim, axisIndex) {
+    var axesMapOnDim = this._axesMap[dim];
+
+    if (axesMapOnDim != null) {
+      return axesMapOnDim[axisIndex || 0];
+    }
+  };
+
+  Grid.prototype.getAxes = function () {
+    return this._axesList.slice();
+  };
+
+  Grid.prototype.getCartesian = function (xAxisIndex, yAxisIndex) {
+    if (xAxisIndex != null && yAxisIndex != null) {
+      var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+      return this._coordsMap[key];
+    }
+
+    if (installCanvasRenderer.isObject(xAxisIndex)) {
+      yAxisIndex = xAxisIndex.yAxisIndex;
+      xAxisIndex = xAxisIndex.xAxisIndex;
+    }
+
+    for (var i = 0, coordList = this._coordsList; i < coordList.length; i++) {
+      if (coordList[i].getAxis('x').index === xAxisIndex || coordList[i].getAxis('y').index === yAxisIndex) {
+        return coordList[i];
+      }
+    }
+  };
+
+  Grid.prototype.getCartesians = function () {
+    return this._coordsList.slice();
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.convertToPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(finder);
+
+    return target.cartesian ? target.cartesian.dataToPoint(value) : target.axis ? target.axis.toGlobalCoord(target.axis.dataToCoord(value)) : null;
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.convertFromPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(finder);
+
+    return target.cartesian ? target.cartesian.pointToData(value) : target.axis ? target.axis.coordToData(target.axis.toLocalCoord(value)) : null;
+  };
+
+  Grid.prototype._findConvertTarget = function (finder) {
+    var seriesModel = finder.seriesModel;
+    var xAxisModel = finder.xAxisModel || seriesModel && seriesModel.getReferringComponents('xAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var yAxisModel = finder.yAxisModel || seriesModel && seriesModel.getReferringComponents('yAxis', installCanvasRenderer.SINGLE_REFERRING).models[0];
+    var gridModel = finder.gridModel;
+    var coordsList = this._coordsList;
+    var cartesian;
+    var axis;
+
+    if (seriesModel) {
+      cartesian = seriesModel.coordinateSystem;
+      installCanvasRenderer.indexOf(coordsList, cartesian) < 0 && (cartesian = null);
+    } else if (xAxisModel && yAxisModel) {
+      cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+    } else if (xAxisModel) {
+      axis = this.getAxis('x', xAxisModel.componentIndex);
+    } else if (yAxisModel) {
+      axis = this.getAxis('y', yAxisModel.componentIndex);
+    } // Lowest priority.
+    else if (gridModel) {
+        var grid = gridModel.coordinateSystem;
+
+        if (grid === this) {
+          cartesian = this._coordsList[0];
+        }
+      }
+
+    return {
+      cartesian: cartesian,
+      axis: axis
+    };
+  };
+  /**
+   * @implements
+   */
+
+
+  Grid.prototype.containPoint = function (point) {
+    var coord = this._coordsList[0];
+
+    if (coord) {
+      return coord.containPoint(point);
+    }
+  };
+  /**
+   * Initialize cartesian coordinate systems
+   */
+
+
+  Grid.prototype._initCartesian = function (gridModel, ecModel, api) {
+    var _this = this;
+
+    var grid = this;
+    var axisPositionUsed = {
+      left: false,
+      right: false,
+      top: false,
+      bottom: false
+    };
+    var axesMap = {
+      x: {},
+      y: {}
+    };
+    var axesCount = {
+      x: 0,
+      y: 0
+    }; // Create axis
+
+    ecModel.eachComponent('xAxis', createAxisCreator('x'), this);
+    ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
+
+    if (!axesCount.x || !axesCount.y) {
+      // Roll back when there no either x or y axis
+      this._axesMap = {};
+      this._axesList = [];
+      return;
+    }
+
+    this._axesMap = axesMap; // Create cartesian2d
+
+    installCanvasRenderer.each(axesMap.x, function (xAxis, xAxisIndex) {
+      installCanvasRenderer.each(axesMap.y, function (yAxis, yAxisIndex) {
+        var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+        var cartesian = new Cartesian2D(key);
+        cartesian.master = _this;
+        cartesian.model = gridModel;
+        _this._coordsMap[key] = cartesian;
+
+        _this._coordsList.push(cartesian);
+
+        cartesian.addAxis(xAxis);
+        cartesian.addAxis(yAxis);
+      });
+    });
+
+    function createAxisCreator(dimName) {
+      return function (axisModel, idx) {
+        if (!isAxisUsedInTheGrid(axisModel, gridModel)) {
+          return;
+        }
+
+        var axisPosition = axisModel.get('position');
+
+        if (dimName === 'x') {
+          // Fix position
+          if (axisPosition !== 'top' && axisPosition !== 'bottom') {
+            // Default bottom of X
+            axisPosition = axisPositionUsed.bottom ? 'top' : 'bottom';
+          }
+        } else {
+          // Fix position
+          if (axisPosition !== 'left' && axisPosition !== 'right') {
+            // Default left of Y
+            axisPosition = axisPositionUsed.left ? 'right' : 'left';
+          }
+        }
+
+        axisPositionUsed[axisPosition] = true;
+        var axis = new Axis2D(dimName, installCanvasRenderer.createScaleByModel(axisModel), [0, 0], axisModel.get('type'), axisPosition);
+        var isCategory = axis.type === 'category';
+        axis.onBand = isCategory && axisModel.get('boundaryGap');
+        axis.inverse = axisModel.get('inverse'); // Inject axis into axisModel
+
+        axisModel.axis = axis; // Inject axisModel into axis
+
+        axis.model = axisModel; // Inject grid info axis
+
+        axis.grid = grid; // Index of axis, can be used as key
+
+        axis.index = idx;
+
+        grid._axesList.push(axis);
+
+        axesMap[dimName][idx] = axis;
+        axesCount[dimName]++;
+      };
+    }
+  };
+  /**
+   * Update cartesian properties from series.
+   */
+
+
+  Grid.prototype._updateScale = function (ecModel, gridModel) {
+    // Reset scale
+    installCanvasRenderer.each(this._axesList, function (axis) {
+      axis.scale.setExtent(Infinity, -Infinity);
+
+      if (axis.type === 'category') {
+        var categorySortInfo = axis.model.get('categorySortInfo');
+        axis.scale.setSortInfo(categorySortInfo);
+      }
+    });
+    ecModel.eachSeries(function (seriesModel) {
+      if (installCanvasRenderer.isCartesian2DSeries(seriesModel)) {
+        var axesModelMap = installCanvasRenderer.findAxisModels(seriesModel);
+        var xAxisModel = axesModelMap.xAxisModel;
+        var yAxisModel = axesModelMap.yAxisModel;
+
+        if (!isAxisUsedInTheGrid(xAxisModel, gridModel) || !isAxisUsedInTheGrid(yAxisModel, gridModel)) {
+          return;
+        }
+
+        var cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+        var data = seriesModel.getData();
+        var xAxis = cartesian.getAxis('x');
+        var yAxis = cartesian.getAxis('y');
+        unionExtent(data, xAxis);
+        unionExtent(data, yAxis);
+      }
+    }, this);
+
+    function unionExtent(data, axis) {
+      installCanvasRenderer.each(installCanvasRenderer.getDataDimensionsOnAxis(data, axis.dim), function (dim) {
+        axis.scale.unionExtentFromData(data, dim);
+      });
+    }
+  };
+  /**
+   * @param dim 'x' or 'y' or 'auto' or null/undefined
+   */
+
+
+  Grid.prototype.getTooltipAxes = function (dim) {
+    var baseAxes = [];
+    var otherAxes = [];
+    installCanvasRenderer.each(this.getCartesians(), function (cartesian) {
+      var baseAxis = dim != null && dim !== 'auto' ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
+      var otherAxis = cartesian.getOtherAxis(baseAxis);
+      installCanvasRenderer.indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
+      installCanvasRenderer.indexOf(otherAxes, otherAxis) < 0 && otherAxes.push(otherAxis);
+    });
+    return {
+      baseAxes: baseAxes,
+      otherAxes: otherAxes
+    };
+  };
+
+  Grid.create = function (ecModel, api) {
+    var grids = [];
+    ecModel.eachComponent('grid', function (gridModel, idx) {
+      var grid = new Grid(gridModel, ecModel, api);
+      grid.name = 'grid_' + idx; // dataSampling requires axis extent, so resize
+      // should be performed in create stage.
+
+      grid.resize(gridModel, api, true);
+      gridModel.coordinateSystem = grid;
+      grids.push(grid);
+    }); // Inject the coordinateSystems into seriesModel
+
+    ecModel.eachSeries(function (seriesModel) {
+      if (!installCanvasRenderer.isCartesian2DSeries(seriesModel)) {
+        return;
+      }
+
+      var axesModelMap = installCanvasRenderer.findAxisModels(seriesModel);
+      var xAxisModel = axesModelMap.xAxisModel;
+      var yAxisModel = axesModelMap.yAxisModel;
+      var gridModel = xAxisModel.getCoordSysModel();
+
+      var grid = gridModel.coordinateSystem;
+      seriesModel.coordinateSystem = grid.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+    });
+    return grids;
+  }; // For deciding which dimensions to use when creating list data
+
+
+  Grid.dimensions = cartesian2DDimensions;
+  return Grid;
+}();
+/**
+ * Check if the axis is used in the specified grid.
+ */
+
+
+function isAxisUsedInTheGrid(axisModel, gridModel) {
+  return axisModel.getCoordSysModel() === gridModel;
+}
+
+function fixAxisOnZero(axesMap, otherAxisDim, axis, // Key: see `getOnZeroRecordKey`
+onZeroRecords) {
+  axis.getAxesOnZeroOf = function () {
+    // TODO: onZero of multiple axes.
+    return otherAxisOnZeroOf ? [otherAxisOnZeroOf] : [];
+  }; // onZero can not be enabled in these two situations:
+  // 1. When any other axis is a category axis.
+  // 2. When no axis is cross 0 point.
+
+
+  var otherAxes = axesMap[otherAxisDim];
+  var otherAxisOnZeroOf;
+  var axisModel = axis.model;
+  var onZero = axisModel.get(['axisLine', 'onZero']);
+  var onZeroAxisIndex = axisModel.get(['axisLine', 'onZeroAxisIndex']);
+
+  if (!onZero) {
+    return;
+  } // If target axis is specified.
+
+
+  if (onZeroAxisIndex != null) {
+    if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
+      otherAxisOnZeroOf = otherAxes[onZeroAxisIndex];
+    }
+  } else {
+    // Find the first available other axis.
+    for (var idx in otherAxes) {
+      if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx]) // Consider that two Y axes on one value axis,
+      // if both onZero, the two Y axes overlap.
+      && !onZeroRecords[getOnZeroRecordKey(otherAxes[idx])]) {
+        otherAxisOnZeroOf = otherAxes[idx];
+        break;
+      }
+    }
+  }
+
+  if (otherAxisOnZeroOf) {
+    onZeroRecords[getOnZeroRecordKey(otherAxisOnZeroOf)] = true;
+  }
+
+  function getOnZeroRecordKey(axis) {
+    return axis.dim + '_' + axis.index;
+  }
+}
+
+function canOnZeroToAxis(axis) {
+  return axis && axis.type !== 'category' && axis.type !== 'time' && installCanvasRenderer.ifAxisCrossZero(axis);
+}
+
+function updateAxisTransform(axis, coordBase) {
+  var axisExtent = axis.getExtent();
+  var axisExtentSum = axisExtent[0] + axisExtent[1]; // Fast transform
+
+  axis.toGlobalCoord = axis.dim === 'x' ? function (coord) {
+    return coord + coordBase;
+  } : function (coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+  axis.toLocalCoord = axis.dim === 'x' ? function (coord) {
+    return coord - coordBase;
+  } : function (coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+}
+
+var inner = installCanvasRenderer.makeInner();
+function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+  var axis = axisModel.axis;
+
+  if (axis.scale.isBlank()) {
+    return;
+  } // TODO: TYPE
+
+
+  var splitAreaModel = axisModel.getModel('splitArea');
+  var areaStyleModel = splitAreaModel.getModel('areaStyle');
+  var areaColors = areaStyleModel.get('color');
+  var gridRect = gridModel.coordinateSystem.getRect();
+  var ticksCoords = axis.getTicksCoords({
+    tickModel: splitAreaModel,
+    clamp: true
+  });
+
+  if (!ticksCoords.length) {
+    return;
+  } // For Making appropriate splitArea animation, the color and anid
+  // should be corresponding to previous one if possible.
+
+
+  var areaColorsLen = areaColors.length;
+  var lastSplitAreaColors = inner(axisView).splitAreaColors;
+  var newSplitAreaColors = installCanvasRenderer.createHashMap();
+  var colorIndex = 0;
+
+  if (lastSplitAreaColors) {
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+
+      if (cIndex != null) {
+        colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+        break;
+      }
+    }
+  }
+
+  var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+  var areaStyle = areaStyleModel.getAreaStyle();
+  areaColors = installCanvasRenderer.isArray(areaColors) ? areaColors : [areaColors];
+
+  for (var i = 1; i < ticksCoords.length; i++) {
+    var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+    var x = void 0;
+    var y = void 0;
+    var width = void 0;
+    var height = void 0;
+
+    if (axis.isHorizontal()) {
+      x = prev;
+      y = gridRect.y;
+      width = tickCoord - x;
+      height = gridRect.height;
+      prev = x + width;
+    } else {
+      x = gridRect.x;
+      y = prev;
+      width = gridRect.width;
+      height = tickCoord - y;
+      prev = y + height;
+    }
+
+    var tickValue = ticksCoords[i - 1].tickValue;
+    tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+    axisGroup.add(new installCanvasRenderer.Rect({
+      anid: tickValue != null ? 'area_' + tickValue : null,
+      shape: {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      style: installCanvasRenderer.defaults({
+        fill: areaColors[colorIndex]
+      }, areaStyle),
+      autoBatch: true,
+      silent: true
+    }));
+    colorIndex = (colorIndex + 1) % areaColorsLen;
+  }
+
+  inner(axisView).splitAreaColors = newSplitAreaColors;
+}
+function rectCoordAxisHandleRemove(axisView) {
+  inner(axisView).splitAreaColors = null;
+}
+
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
+
+var CartesianAxisView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(CartesianAxisView, _super);
+
+  function CartesianAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianAxisView.type;
+    _this.axisPointerClass = 'CartesianAxisPointer';
+    return _this;
+  }
+  /**
+   * @override
+   */
+
+
+  CartesianAxisView.prototype.render = function (axisModel, ecModel, api, payload) {
+    this.group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new installCanvasRenderer.Group();
+    this.group.add(this._axisGroup);
+
+    if (!axisModel.get('show')) {
+      return;
+    }
+
+    var gridModel = axisModel.getCoordSysModel();
+    var layout = installCanvasRenderer.layout(gridModel, axisModel);
+    var axisBuilder = new installCanvasRenderer.AxisBuilder(axisModel, installCanvasRenderer.extend({
+      handleAutoShown: function (elementType) {
+        var cartesians = gridModel.coordinateSystem.getCartesians();
+
+        for (var i = 0; i < cartesians.length; i++) {
+          if (installCanvasRenderer.isIntervalOrLogScale(cartesians[i].getOtherAxis(axisModel.axis).scale)) {
+            // Still show axis tick or axisLine if other axis is value / log
+            return true;
+          }
+        } // Not show axisTick or axisLine if other axis is category / time
+
+
+        return false;
+      }
+    }, layout));
+    installCanvasRenderer.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+
+    this._axisGroup.add(axisBuilder.getGroup());
+
+    installCanvasRenderer.each(selfBuilderAttrs, function (name) {
+      if (axisModel.get([name, 'show'])) {
+        axisElementBuilders[name](this, this._axisGroup, axisModel, gridModel);
+      }
+    }, this); // THIS is a special case for bar racing chart.
+    // Update the axis label from the natural initial layout to
+    // sorted layout should has no animation.
+
+    var isInitialSortFromBarRacing = payload && payload.type === 'changeAxisOrder' && payload.isInitSort;
+
+    if (!isInitialSortFromBarRacing) {
+      installCanvasRenderer.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+    }
+
+    _super.prototype.render.call(this, axisModel, ecModel, api, payload);
+  };
+
+  CartesianAxisView.prototype.remove = function () {
+    rectCoordAxisHandleRemove(this);
+  };
+
+  CartesianAxisView.type = 'cartesianAxis';
+  return CartesianAxisView;
+}(installCanvasRenderer.AxisView);
+
+var axisElementBuilders = {
+  splitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+
+    if (axis.scale.isBlank()) {
+      return;
+    }
+
+    var splitLineModel = axisModel.getModel('splitLine');
+    var lineStyleModel = splitLineModel.getModel('lineStyle');
+    var lineColors = lineStyleModel.get('color');
+    lineColors = installCanvasRenderer.isArray(lineColors) ? lineColors : [lineColors];
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var lineCount = 0;
+    var ticksCoords = axis.getTicksCoords({
+      tickModel: splitLineModel
+    });
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+      if (isHorizontal) {
+        p1[0] = tickCoord;
+        p1[1] = gridRect.y;
+        p2[0] = tickCoord;
+        p2[1] = gridRect.y + gridRect.height;
+      } else {
+        p1[0] = gridRect.x;
+        p1[1] = tickCoord;
+        p2[0] = gridRect.x + gridRect.width;
+        p2[1] = tickCoord;
+      }
+
+      var colorIndex = lineCount++ % lineColors.length;
+      var tickValue = ticksCoords[i].tickValue;
+      var line = new installCanvasRenderer.Line({
+        anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+        autoBatch: true,
+        shape: {
+          x1: p1[0],
+          y1: p1[1],
+          x2: p2[0],
+          y2: p2[1]
+        },
+        style: installCanvasRenderer.defaults({
+          stroke: lineColors[colorIndex]
+        }, lineStyle),
+        silent: true
+      });
+      installCanvasRenderer.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+      axisGroup.add(line);
+    }
+  },
+  minorSplitLine: function (axisView, axisGroup, axisModel, gridModel) {
+    var axis = axisModel.axis;
+    var minorSplitLineModel = axisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var minorTicksCoords = axis.getMinorTicksCoords();
+
+    if (!minorTicksCoords.length) {
+      return;
+    }
+
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
+
+        if (isHorizontal) {
+          p1[0] = tickCoord;
+          p1[1] = gridRect.y;
+          p2[0] = tickCoord;
+          p2[1] = gridRect.y + gridRect.height;
+        } else {
+          p1[0] = gridRect.x;
+          p1[1] = tickCoord;
+          p2[0] = gridRect.x + gridRect.width;
+          p2[1] = tickCoord;
+        }
+
+        var line = new installCanvasRenderer.Line({
+          anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
+          autoBatch: true,
+          shape: {
+            x1: p1[0],
+            y1: p1[1],
+            x2: p2[0],
+            y2: p2[1]
+          },
+          style: lineStyle,
+          silent: true
+        });
+        installCanvasRenderer.subPixelOptimizeLine(line.shape, lineStyle.lineWidth);
+        axisGroup.add(line);
+      }
+    }
+  },
+  splitArea: function (axisView, axisGroup, axisModel, gridModel) {
+    rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel);
+  }
+};
+
+var CartesianXAxisView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(CartesianXAxisView, _super);
+
+  function CartesianXAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+
+  CartesianXAxisView.type = 'xAxis';
+  return CartesianXAxisView;
+}(CartesianAxisView);
+
+var CartesianYAxisView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(CartesianYAxisView, _super);
+
+  function CartesianYAxisView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = CartesianXAxisView.type;
+    return _this;
+  }
+
+  CartesianYAxisView.type = 'yAxis';
+  return CartesianYAxisView;
+}(CartesianAxisView);
+
+var GridView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(GridView, _super);
+
+  function GridView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = 'grid';
+    return _this;
+  }
+
+  GridView.prototype.render = function (gridModel, ecModel) {
+    this.group.removeAll();
+
+    if (gridModel.get('show')) {
+      this.group.add(new installCanvasRenderer.Rect({
+        shape: gridModel.coordinateSystem.getRect(),
+        style: installCanvasRenderer.defaults({
+          fill: gridModel.get('backgroundColor')
+        }, gridModel.getItemStyle()),
+        silent: true,
+        z2: -1
+      }));
+    }
+  };
+
+  GridView.type = 'grid';
+  return GridView;
+}(installCanvasRenderer.ComponentView);
+
+var extraOption = {
+  // gridIndex: 0,
+  // gridId: '',
+  offset: 0
+};
+function install$3(registers) {
+  registers.registerComponentView(GridView);
+  registers.registerComponentModel(GridModel);
+  registers.registerCoordinateSystem('cartesian2d', Grid);
+  axisModelCreator(registers, 'x', CartesianAxisModel, extraOption);
+  axisModelCreator(registers, 'y', CartesianAxisModel, extraOption);
+  registers.registerComponentView(CartesianXAxisView);
+  registers.registerComponentView(CartesianYAxisView);
+  registers.registerPreprocessor(function (option) {
+    // Only create grid when need
+    if (option.xAxis && option.yAxis && !option.grid) {
+      option.grid = {};
+    }
+  });
+}
+
+function install$2(registers) {
+  installCanvasRenderer.use(install$3);
+  installCanvasRenderer.use(installCanvasRenderer.install);
+}
+
+var TitleModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(TitleModel, _super);
+
+  function TitleModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TitleModel.type;
+    _this.layoutMode = {
+      type: 'box',
+      ignoreSize: true
+    };
+    return _this;
+  }
+
+  TitleModel.type = 'title';
+  TitleModel.defaultOption = {
+    // zlevel: 0,
+    z: 6,
+    show: true,
+    text: '',
+    target: 'blank',
+    subtext: '',
+    subtarget: 'blank',
+    left: 0,
+    top: 0,
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderColor: '#ccc',
+    borderWidth: 0,
+    padding: 5,
+    itemGap: 10,
+    textStyle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: '#464646'
+    },
+    subtextStyle: {
+      fontSize: 12,
+      color: '#6E7079'
+    }
+  };
+  return TitleModel;
+}(installCanvasRenderer.ComponentModel); // View
+
+
+var TitleView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(TitleView, _super);
+
+  function TitleView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TitleView.type;
+    return _this;
+  }
+
+  TitleView.prototype.render = function (titleModel, ecModel, api) {
+    this.group.removeAll();
+
+    if (!titleModel.get('show')) {
+      return;
+    }
+
+    var group = this.group;
+    var textStyleModel = titleModel.getModel('textStyle');
+    var subtextStyleModel = titleModel.getModel('subtextStyle');
+    var textAlign = titleModel.get('textAlign');
+    var textVerticalAlign = installCanvasRenderer.retrieve2(titleModel.get('textBaseline'), titleModel.get('textVerticalAlign'));
+    var textEl = new installCanvasRenderer.ZRText({
+      style: installCanvasRenderer.createTextStyle(textStyleModel, {
+        text: titleModel.get('text'),
+        fill: textStyleModel.getTextColor()
+      }, {
+        disableBox: true
+      }),
+      z2: 10
+    });
+    var textRect = textEl.getBoundingRect();
+    var subText = titleModel.get('subtext');
+    var subTextEl = new installCanvasRenderer.ZRText({
+      style: installCanvasRenderer.createTextStyle(subtextStyleModel, {
+        text: subText,
+        fill: subtextStyleModel.getTextColor(),
+        y: textRect.height + titleModel.get('itemGap'),
+        verticalAlign: 'top'
+      }, {
+        disableBox: true
+      }),
+      z2: 10
+    });
+    var link = titleModel.get('link');
+    var sublink = titleModel.get('sublink');
+    var triggerEvent = titleModel.get('triggerEvent', true);
+    textEl.silent = !link && !triggerEvent;
+    subTextEl.silent = !sublink && !triggerEvent;
+
+    if (link) {
+      textEl.on('click', function () {
+        installCanvasRenderer.windowOpen(link, '_' + titleModel.get('target'));
+      });
+    }
+
+    if (sublink) {
+      subTextEl.on('click', function () {
+        installCanvasRenderer.windowOpen(sublink, '_' + titleModel.get('subtarget'));
+      });
+    }
+
+    installCanvasRenderer.getECData(textEl).eventData = installCanvasRenderer.getECData(subTextEl).eventData = triggerEvent ? {
+      componentType: 'title',
+      componentIndex: titleModel.componentIndex
+    } : null;
+    group.add(textEl);
+    subText && group.add(subTextEl); // If no subText, but add subTextEl, there will be an empty line.
+
+    var groupRect = group.getBoundingRect();
+    var layoutOption = titleModel.getBoxLayoutParams();
+    layoutOption.width = groupRect.width;
+    layoutOption.height = groupRect.height;
+    var layoutRect = installCanvasRenderer.getLayoutRect(layoutOption, {
+      width: api.getWidth(),
+      height: api.getHeight()
+    }, titleModel.get('padding')); // Adjust text align based on position
+
+    if (!textAlign) {
+      // Align left if title is on the left. center and right is same
+      textAlign = titleModel.get('left') || titleModel.get('right'); // @ts-ignore
+
+      if (textAlign === 'middle') {
+        textAlign = 'center';
+      } // Adjust layout by text align
+
+
+      if (textAlign === 'right') {
+        layoutRect.x += layoutRect.width;
+      } else if (textAlign === 'center') {
+        layoutRect.x += layoutRect.width / 2;
+      }
+    }
+
+    if (!textVerticalAlign) {
+      textVerticalAlign = titleModel.get('top') || titleModel.get('bottom'); // @ts-ignore
+
+      if (textVerticalAlign === 'center') {
+        textVerticalAlign = 'middle';
+      }
+
+      if (textVerticalAlign === 'bottom') {
+        layoutRect.y += layoutRect.height;
+      } else if (textVerticalAlign === 'middle') {
+        layoutRect.y += layoutRect.height / 2;
+      }
+
+      textVerticalAlign = textVerticalAlign || 'top';
+    }
+
+    group.x = layoutRect.x;
+    group.y = layoutRect.y;
+    group.markRedraw();
+    var alignStyle = {
+      align: textAlign,
+      verticalAlign: textVerticalAlign
+    };
+    textEl.setStyle(alignStyle);
+    subTextEl.setStyle(alignStyle); // Render background
+    // Get groupRect again because textAlign has been changed
+
+    groupRect = group.getBoundingRect();
+    var padding = layoutRect.margin;
+    var style = titleModel.getItemStyle(['color', 'opacity']);
+    style.fill = titleModel.get('backgroundColor');
+    var rect = new installCanvasRenderer.Rect({
+      shape: {
+        x: groupRect.x - padding[3],
+        y: groupRect.y - padding[0],
+        width: groupRect.width + padding[1] + padding[3],
+        height: groupRect.height + padding[0] + padding[2],
+        r: titleModel.get('borderRadius')
+      },
+      style: style,
+      subPixelOptimize: true,
+      silent: true
+    });
+    group.add(rect);
+  };
+
+  TitleView.type = 'title';
+  return TitleView;
+}(installCanvasRenderer.ComponentView);
+
+function install$1(registers) {
+  registers.registerComponentModel(TitleModel);
+  registers.registerComponentView(TitleView);
+}
+
+/**
+ * @return label string. Not null/undefined
+ */
+
+function getDefaultLabel(data, dataIndex) {
+  var labelDims = data.mapDimensionsAll('defaultedLabel');
+  var len = labelDims.length; // Simple optimization (in lots of cases, label dims length is 1)
+
+  if (len === 1) {
+    var rawVal = installCanvasRenderer.retrieveRawValue(data, dataIndex, labelDims[0]);
+    return rawVal != null ? rawVal + '' : null;
+  } else if (len) {
+    var vals = [];
+
+    for (var i = 0; i < labelDims.length; i++) {
+      vals.push(installCanvasRenderer.retrieveRawValue(data, dataIndex, labelDims[i]));
+    }
+
+    return vals.join(' ');
+  }
+}
+function getDefaultInterpolatedLabel(data, interpolatedValue) {
+  var labelDims = data.mapDimensionsAll('defaultedLabel');
+
+  if (!installCanvasRenderer.isArray(interpolatedValue)) {
+    return interpolatedValue + '';
+  }
+
+  var vals = [];
+
+  for (var i = 0; i < labelDims.length; i++) {
+    var dimIndex = data.getDimensionIndex(labelDims[i]);
+
+    if (dimIndex >= 0) {
+      vals.push(interpolatedValue[dimIndex]);
+    }
+  }
+
+  return vals.join(' ');
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function isCoordinateSystemType(coordSys, type) {
+  return coordSys.type === type;
+}
+
+function createGridClipPath(cartesian, hasAnimation, seriesModel, done, during) {
+  var rect = cartesian.getArea();
+  var x = rect.x;
+  var y = rect.y;
+  var width = rect.width;
+  var height = rect.height;
+  var lineWidth = seriesModel.get(['lineStyle', 'width']) || 2; // Expand the clip path a bit to avoid the border is clipped and looks thinner
+
+  x -= lineWidth / 2;
+  y -= lineWidth / 2;
+  width += lineWidth;
+  height += lineWidth; // fix: https://github.com/apache/incubator-echarts/issues/11369
+
+  x = Math.floor(x);
+  width = Math.round(width);
+  var clipPath = new installCanvasRenderer.Rect({
+    shape: {
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    }
+  });
+
+  if (hasAnimation) {
+    var baseAxis = cartesian.getBaseAxis();
+    var isHorizontal = baseAxis.isHorizontal();
+    var isAxisInversed = baseAxis.inverse;
+
+    if (isHorizontal) {
+      if (isAxisInversed) {
+        clipPath.shape.x += width;
+      }
+
+      clipPath.shape.width = 0;
+    } else {
+      if (!isAxisInversed) {
+        clipPath.shape.y += height;
+      }
+
+      clipPath.shape.height = 0;
+    }
+
+    var duringCb = installCanvasRenderer.isFunction(during) ? function (percent) {
+      during(percent, clipPath);
+    } : null;
+    installCanvasRenderer.initProps(clipPath, {
+      shape: {
+        width: width,
+        height: height,
+        x: x,
+        y: y
+      }
+    }, seriesModel, null, done, duringCb);
+  }
+
+  return clipPath;
+}
+
+function createPolarClipPath(polar, hasAnimation, seriesModel) {
+  var sectorArea = polar.getArea(); // Avoid float number rounding error for symbol on the edge of axis extent.
+
+  var r0 = installCanvasRenderer.round(sectorArea.r0, 1);
+  var r = installCanvasRenderer.round(sectorArea.r, 1);
+  var clipPath = new installCanvasRenderer.Sector({
+    shape: {
+      cx: installCanvasRenderer.round(polar.cx, 1),
+      cy: installCanvasRenderer.round(polar.cy, 1),
+      r0: r0,
+      r: r,
+      startAngle: sectorArea.startAngle,
+      endAngle: sectorArea.endAngle,
+      clockwise: sectorArea.clockwise
+    }
+  });
+
+  if (hasAnimation) {
+    var isRadial = polar.getBaseAxis().dim === 'angle';
+
+    if (isRadial) {
+      clipPath.shape.endAngle = sectorArea.startAngle;
+    } else {
+      clipPath.shape.r = r0;
+    }
+
+    installCanvasRenderer.initProps(clipPath, {
+      shape: {
+        endAngle: sectorArea.endAngle,
+        r: r
+      }
+    }, seriesModel);
+  }
+
+  return clipPath;
+}
+
+function createClipPath(coordSys, hasAnimation, seriesModel, done, during) {
+  if (!coordSys) {
+    return null;
+  } else if (coordSys.type === 'polar') {
+    return createPolarClipPath(coordSys, hasAnimation, seriesModel);
+  } else if (coordSys.type === 'cartesian2d') {
+    return createGridClipPath(coordSys, hasAnimation, seriesModel, done, during);
+  }
+
+  return null;
+}
+
+var samplers = {
+  average: function (frame) {
+    var sum = 0;
+    var count = 0;
+
+    for (var i = 0; i < frame.length; i++) {
+      if (!isNaN(frame[i])) {
+        sum += frame[i];
+        count++;
+      }
+    } // Return NaN if count is 0
+
+
+    return count === 0 ? NaN : sum / count;
+  },
+  sum: function (frame) {
+    var sum = 0;
+
+    for (var i = 0; i < frame.length; i++) {
+      // Ignore NaN
+      sum += frame[i] || 0;
+    }
+
+    return sum;
+  },
+  max: function (frame) {
+    var max = -Infinity;
+
+    for (var i = 0; i < frame.length; i++) {
+      frame[i] > max && (max = frame[i]);
+    } // NaN will cause illegal axis extent.
+
+
+    return isFinite(max) ? max : NaN;
+  },
+  min: function (frame) {
+    var min = Infinity;
+
+    for (var i = 0; i < frame.length; i++) {
+      frame[i] < min && (min = frame[i]);
+    } // NaN will cause illegal axis extent.
+
+
+    return isFinite(min) ? min : NaN;
+  },
+  // TODO
+  // Median
+  nearest: function (frame) {
+    return frame[0];
+  }
+};
+
+var indexSampler = function (frame) {
+  return Math.round(frame.length / 2);
+};
+
+function dataSample(seriesType) {
+  return {
+    seriesType: seriesType,
+    // FIXME:TS never used, so comment it
+    // modifyOutputEnd: true,
+    reset: function (seriesModel, ecModel, api) {
+      var data = seriesModel.getData();
+      var sampling = seriesModel.get('sampling');
+      var coordSys = seriesModel.coordinateSystem;
+      var count = data.count(); // Only cartesian2d support down sampling. Disable it when there is few data.
+
+      if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
+        var baseAxis = coordSys.getBaseAxis();
+        var valueAxis = coordSys.getOtherAxis(baseAxis);
+        var extent = baseAxis.getExtent();
+        var dpr = api.getDevicePixelRatio(); // Coordinste system has been resized
+
+        var size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
+        var rate = Math.round(count / size);
+
+        if (isFinite(rate) && rate > 1) {
+          if (sampling === 'lttb') {
+            seriesModel.setData(data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
+          }
+
+          var sampler = void 0;
+
+          if (installCanvasRenderer.isString(sampling)) {
+            sampler = samplers[sampling];
+          } else if (installCanvasRenderer.isFunction(sampling)) {
+            sampler = sampling;
+          }
+
+          if (sampler) {
+            // Only support sample the first dim mapped from value axis.
+            seriesModel.setData(data.downSample(data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler));
+          }
+        }
+      }
+    }
+  };
+}
+
+var BaseBarSeriesModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(BaseBarSeriesModel, _super);
+
+  function BaseBarSeriesModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = BaseBarSeriesModel.type;
+    return _this;
+  }
+
+  BaseBarSeriesModel.prototype.getInitialData = function (option, ecModel) {
+    return createSeriesData(null, this, {
+      useEncodeDefaulter: true
+    });
+  };
+
+  BaseBarSeriesModel.prototype.getMarkerPosition = function (value, dims, startingAtTick) {
+    var coordSys = this.coordinateSystem;
+
+    if (coordSys && coordSys.clampData) {
+      // PENDING if clamp ?
+      var pt_1 = coordSys.dataToPoint(coordSys.clampData(value));
+
+      if (startingAtTick) {
+        installCanvasRenderer.each(coordSys.getAxes(), function (axis, idx) {
+          // If axis type is category, use tick coords instead
+          if (axis.type === 'category') {
+            var tickCoords = axis.getTicksCoords();
+            var tickIdx = coordSys.clampData(value)[idx]; // The index of rightmost tick of markArea is 1 larger than x1/y1 index
+
+            if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) {
+              tickIdx += 1;
+            }
+
+            tickIdx > tickCoords.length - 1 && (tickIdx = tickCoords.length - 1);
+            tickIdx < 0 && (tickIdx = 0);
+            tickCoords[tickIdx] && (pt_1[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord));
+          }
+        });
+      } else {
+        var data = this.getData();
+        var offset = data.getLayout('offset');
+        var size = data.getLayout('size');
+        var offsetIndex = coordSys.getBaseAxis().isHorizontal() ? 0 : 1;
+        pt_1[offsetIndex] += offset + size / 2;
+      }
+
+      return pt_1;
+    }
+
+    return [NaN, NaN];
+  };
+
+  BaseBarSeriesModel.type = 'series.__base_bar__';
+  BaseBarSeriesModel.defaultOption = {
+    // zlevel: 0,
+    z: 2,
+    coordinateSystem: 'cartesian2d',
+    legendHoverLink: true,
+    // stack: null
+    // Cartesian coordinate system
+    // xAxisIndex: 0,
+    // yAxisIndex: 0,
+    barMinHeight: 0,
+    barMinAngle: 0,
+    // cursor: null,
+    large: false,
+    largeThreshold: 400,
+    progressive: 3e3,
+    progressiveChunkMode: 'mod'
+  };
+  return BaseBarSeriesModel;
+}(installCanvasRenderer.SeriesModel);
+
+installCanvasRenderer.SeriesModel.registerClass(BaseBarSeriesModel);
+
+var BarSeriesModel =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(BarSeriesModel, _super);
+
+  function BarSeriesModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = BarSeriesModel.type;
+    return _this;
+  }
+
+  BarSeriesModel.prototype.getInitialData = function () {
+    return createSeriesData(null, this, {
+      useEncodeDefaulter: true,
+      createInvertedIndices: !!this.get('realtimeSort', true) || null
+    });
+  };
+  /**
+   * @override
+   */
+
+
+  BarSeriesModel.prototype.getProgressive = function () {
+    // Do not support progressive in normal mode.
+    return this.get('large') ? this.get('progressive') : false;
+  };
+  /**
+   * @override
+   */
+
+
+  BarSeriesModel.prototype.getProgressiveThreshold = function () {
+    // Do not support progressive in normal mode.
+    var progressiveThreshold = this.get('progressiveThreshold');
+    var largeThreshold = this.get('largeThreshold');
+
+    if (largeThreshold > progressiveThreshold) {
+      progressiveThreshold = largeThreshold;
+    }
+
+    return progressiveThreshold;
+  };
+
+  BarSeriesModel.prototype.brushSelector = function (dataIndex, data, selectors) {
+    return selectors.rect(data.getItemLayout(dataIndex));
+  };
+
+  BarSeriesModel.type = 'series.bar';
+  BarSeriesModel.dependencies = ['grid', 'polar'];
+  BarSeriesModel.defaultOption = installCanvasRenderer.inheritDefaultOption(BaseBarSeriesModel.defaultOption, {
+    // If clipped
+    // Only available on cartesian2d
+    clip: true,
+    roundCap: false,
+    showBackground: false,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)',
+      borderColor: null,
+      borderWidth: 0,
+      borderType: 'solid',
+      borderRadius: 0,
+      shadowBlur: 0,
+      shadowColor: null,
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      opacity: 1
+    },
+    select: {
+      itemStyle: {
+        borderColor: '#212121'
+      }
+    },
+    realtimeSort: false
+  });
+  return BarSeriesModel;
+}(BaseBarSeriesModel);
+
+/**
+ * Sausage: similar to sector, but have half circle on both sides
+ */
+
+var SausageShape =
+/** @class */
+function () {
+  function SausageShape() {
+    this.cx = 0;
+    this.cy = 0;
+    this.r0 = 0;
+    this.r = 0;
+    this.startAngle = 0;
+    this.endAngle = Math.PI * 2;
+    this.clockwise = true;
+  }
+
+  return SausageShape;
+}();
+
+var SausagePath =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(SausagePath, _super);
+
+  function SausagePath(opts) {
+    var _this = _super.call(this, opts) || this;
+
+    _this.type = 'sausage';
+    return _this;
+  }
+
+  SausagePath.prototype.getDefaultShape = function () {
+    return new SausageShape();
+  };
+
+  SausagePath.prototype.buildPath = function (ctx, shape) {
+    var cx = shape.cx;
+    var cy = shape.cy;
+    var r0 = Math.max(shape.r0 || 0, 0);
+    var r = Math.max(shape.r, 0);
+    var dr = (r - r0) * 0.5;
+    var rCenter = r0 + dr;
+    var startAngle = shape.startAngle;
+    var endAngle = shape.endAngle;
+    var clockwise = shape.clockwise;
+    var PI2 = Math.PI * 2;
+    var lessThanCircle = clockwise ? endAngle - startAngle < PI2 : startAngle - endAngle < PI2;
+
+    if (!lessThanCircle) {
+      // Normalize angles
+      startAngle = endAngle - (clockwise ? PI2 : -PI2);
+    }
+
+    var unitStartX = Math.cos(startAngle);
+    var unitStartY = Math.sin(startAngle);
+    var unitEndX = Math.cos(endAngle);
+    var unitEndY = Math.sin(endAngle);
+
+    if (lessThanCircle) {
+      ctx.moveTo(unitStartX * r0 + cx, unitStartY * r0 + cy);
+      ctx.arc(unitStartX * rCenter + cx, unitStartY * rCenter + cy, dr, -Math.PI + startAngle, startAngle, !clockwise);
+    } else {
+      ctx.moveTo(unitStartX * r + cx, unitStartY * r + cy);
+    }
+
+    ctx.arc(cx, cy, r, startAngle, endAngle, !clockwise);
+    ctx.arc(unitEndX * rCenter + cx, unitEndY * rCenter + cy, dr, endAngle - Math.PI * 2, endAngle - Math.PI, !clockwise);
+
+    if (r0 !== 0) {
+      ctx.arc(cx, cy, r0, endAngle, startAngle, clockwise);
+    } // ctx.closePath();
+
+  };
+
+  return SausagePath;
+}(installCanvasRenderer.Path);
+
+function createSectorCalculateTextPosition(positionMapping, opts) {
+  opts = opts || {};
+  var isRoundCap = opts.isRoundCap;
+  return function (out, opts, boundingRect) {
+    var textPosition = opts.position;
+
+    if (!textPosition || textPosition instanceof Array) {
+      return installCanvasRenderer.calculateTextPosition(out, opts, boundingRect);
+    }
+
+    var mappedSectorPosition = positionMapping(textPosition);
+    var distance = opts.distance != null ? opts.distance : 5;
+    var sector = this.shape;
+    var cx = sector.cx;
+    var cy = sector.cy;
+    var r = sector.r;
+    var r0 = sector.r0;
+    var middleR = (r + r0) / 2;
+    var startAngle = sector.startAngle;
+    var endAngle = sector.endAngle;
+    var middleAngle = (startAngle + endAngle) / 2;
+    var extraDist = isRoundCap ? Math.abs(r - r0) / 2 : 0;
+    var mathCos = Math.cos;
+    var mathSin = Math.sin; // base position: top-left
+
+    var x = cx + r * mathCos(startAngle);
+    var y = cy + r * mathSin(startAngle);
+    var textAlign = 'left';
+    var textVerticalAlign = 'top';
+
+    switch (mappedSectorPosition) {
+      case 'startArc':
+        x = cx + (r0 - distance) * mathCos(middleAngle);
+        y = cy + (r0 - distance) * mathSin(middleAngle);
+        textAlign = 'center';
+        textVerticalAlign = 'top';
+        break;
+
+      case 'insideStartArc':
+        x = cx + (r0 + distance) * mathCos(middleAngle);
+        y = cy + (r0 + distance) * mathSin(middleAngle);
+        textAlign = 'center';
+        textVerticalAlign = 'bottom';
+        break;
+
+      case 'startAngle':
+        x = cx + middleR * mathCos(startAngle) + adjustAngleDistanceX(startAngle, distance + extraDist, false);
+        y = cy + middleR * mathSin(startAngle) + adjustAngleDistanceY(startAngle, distance + extraDist, false);
+        textAlign = 'right';
+        textVerticalAlign = 'middle';
+        break;
+
+      case 'insideStartAngle':
+        x = cx + middleR * mathCos(startAngle) + adjustAngleDistanceX(startAngle, -distance + extraDist, false);
+        y = cy + middleR * mathSin(startAngle) + adjustAngleDistanceY(startAngle, -distance + extraDist, false);
+        textAlign = 'left';
+        textVerticalAlign = 'middle';
+        break;
+
+      case 'middle':
+        x = cx + middleR * mathCos(middleAngle);
+        y = cy + middleR * mathSin(middleAngle);
+        textAlign = 'center';
+        textVerticalAlign = 'middle';
+        break;
+
+      case 'endArc':
+        x = cx + (r + distance) * mathCos(middleAngle);
+        y = cy + (r + distance) * mathSin(middleAngle);
+        textAlign = 'center';
+        textVerticalAlign = 'bottom';
+        break;
+
+      case 'insideEndArc':
+        x = cx + (r - distance) * mathCos(middleAngle);
+        y = cy + (r - distance) * mathSin(middleAngle);
+        textAlign = 'center';
+        textVerticalAlign = 'top';
+        break;
+
+      case 'endAngle':
+        x = cx + middleR * mathCos(endAngle) + adjustAngleDistanceX(endAngle, distance + extraDist, true);
+        y = cy + middleR * mathSin(endAngle) + adjustAngleDistanceY(endAngle, distance + extraDist, true);
+        textAlign = 'left';
+        textVerticalAlign = 'middle';
+        break;
+
+      case 'insideEndAngle':
+        x = cx + middleR * mathCos(endAngle) + adjustAngleDistanceX(endAngle, -distance + extraDist, true);
+        y = cy + middleR * mathSin(endAngle) + adjustAngleDistanceY(endAngle, -distance + extraDist, true);
+        textAlign = 'right';
+        textVerticalAlign = 'middle';
+        break;
+
+      default:
+        return installCanvasRenderer.calculateTextPosition(out, opts, boundingRect);
+    }
+
+    out = out || {};
+    out.x = x;
+    out.y = y;
+    out.align = textAlign;
+    out.verticalAlign = textVerticalAlign;
+    return out;
+  };
+}
+function setSectorTextRotation(sector, textPosition, positionMapping, rotateType) {
+  if (installCanvasRenderer.isNumber(rotateType)) {
+    // user-set rotation
+    sector.setTextConfig({
+      rotation: rotateType
+    });
+    return;
+  } else if (installCanvasRenderer.isArray(textPosition)) {
+    // user-set position, use 0 as auto rotation
+    sector.setTextConfig({
+      rotation: 0
+    });
+    return;
+  }
+
+  var shape = sector.shape;
+  var startAngle = shape.clockwise ? shape.startAngle : shape.endAngle;
+  var endAngle = shape.clockwise ? shape.endAngle : shape.startAngle;
+  var middleAngle = (startAngle + endAngle) / 2;
+  var anchorAngle;
+  var mappedSectorPosition = positionMapping(textPosition);
+
+  switch (mappedSectorPosition) {
+    case 'startArc':
+    case 'insideStartArc':
+    case 'middle':
+    case 'insideEndArc':
+    case 'endArc':
+      anchorAngle = middleAngle;
+      break;
+
+    case 'startAngle':
+    case 'insideStartAngle':
+      anchorAngle = startAngle;
+      break;
+
+    case 'endAngle':
+    case 'insideEndAngle':
+      anchorAngle = endAngle;
+      break;
+
+    default:
+      sector.setTextConfig({
+        rotation: 0
+      });
+      return;
+  }
+
+  var rotate = Math.PI * 1.5 - anchorAngle;
+  /**
+   * TODO: labels with rotate > Math.PI / 2 should be rotate another
+   * half round flipped to increase readability. However, only middle
+   * position supports this for now, because in other positions, the
+   * anchor point is not at the center of the text, so the positions
+   * after rotating is not as expected.
+   */
+
+  if (mappedSectorPosition === 'middle' && rotate > Math.PI / 2 && rotate < Math.PI * 1.5) {
+    rotate -= Math.PI;
+  }
+
+  sector.setTextConfig({
+    rotation: rotate
+  });
+}
+
+function adjustAngleDistanceX(angle, distance, isEnd) {
+  return distance * Math.sin(angle) * (isEnd ? -1 : 1);
+}
+
+function adjustAngleDistanceY(angle, distance, isEnd) {
+  return distance * Math.cos(angle) * (isEnd ? 1 : -1);
+}
+
+var mathMax = Math.max;
+var mathMin = Math.min;
+
+function getClipArea(coord, data) {
+  var coordSysClipArea = coord.getArea && coord.getArea();
+
+  if (isCoordinateSystemType(coord, 'cartesian2d')) {
+    var baseAxis = coord.getBaseAxis(); // When boundaryGap is false or using time axis. bar may exceed the grid.
+    // We should not clip this part.
+    // See test/bar2.html
+
+    if (baseAxis.type !== 'category' || !baseAxis.onBand) {
+      var expandWidth = data.getLayout('bandWidth');
+
+      if (baseAxis.isHorizontal()) {
+        coordSysClipArea.x -= expandWidth;
+        coordSysClipArea.width += expandWidth * 2;
+      } else {
+        coordSysClipArea.y -= expandWidth;
+        coordSysClipArea.height += expandWidth * 2;
+      }
+    }
+  }
+
+  return coordSysClipArea;
+}
+
+var BarView =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(BarView, _super);
+
+  function BarView() {
+    var _this = _super.call(this) || this;
+
+    _this.type = BarView.type;
+    _this._isFirstFrame = true;
+    return _this;
+  }
+
+  BarView.prototype.render = function (seriesModel, ecModel, api, payload) {
+    this._model = seriesModel;
+
+    this._removeOnRenderedListener(api);
+
+    this._updateDrawMode(seriesModel);
+
+    var coordinateSystemType = seriesModel.get('coordinateSystem');
+
+    if (coordinateSystemType === 'cartesian2d' || coordinateSystemType === 'polar') {
+      // Clear previously rendered progressive elements.
+      this._progressiveEls = null;
+      this._isLargeDraw ? this._renderLarge(seriesModel, ecModel, api) : this._renderNormal(seriesModel, ecModel, api, payload);
+    }
+  };
+
+  BarView.prototype.incrementalPrepareRender = function (seriesModel) {
+    this._clear();
+
+    this._updateDrawMode(seriesModel); // incremental also need to clip, otherwise might be overlow.
+    // But must not set clip in each frame, otherwise all of the children will be marked redraw.
+
+
+    this._updateLargeClip(seriesModel);
+  };
+
+  BarView.prototype.incrementalRender = function (params, seriesModel) {
+    // Reset
+    this._progressiveEls = []; // Do not support progressive in normal mode.
+
+    this._incrementalRenderLarge(params, seriesModel);
+  };
+
+  BarView.prototype.eachRendered = function (cb) {
+    installCanvasRenderer.traverseElements(this._progressiveEls || this.group, cb);
+  };
+
+  BarView.prototype._updateDrawMode = function (seriesModel) {
+    var isLargeDraw = seriesModel.pipelineContext.large;
+
+    if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
+      this._isLargeDraw = isLargeDraw;
+
+      this._clear();
+    }
+  };
+
+  BarView.prototype._renderNormal = function (seriesModel, ecModel, api, payload) {
+    var group = this.group;
+    var data = seriesModel.getData();
+    var oldData = this._data;
+    var coord = seriesModel.coordinateSystem;
+    var baseAxis = coord.getBaseAxis();
+    var isHorizontalOrRadial;
+
+    if (coord.type === 'cartesian2d') {
+      isHorizontalOrRadial = baseAxis.isHorizontal();
+    } else if (coord.type === 'polar') {
+      isHorizontalOrRadial = baseAxis.dim === 'angle';
+    }
+
+    var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
+    var realtimeSortCfg = shouldRealtimeSort(seriesModel, coord);
+
+    if (realtimeSortCfg) {
+      this._enableRealtimeSort(realtimeSortCfg, data, api);
+    }
+
+    var needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
+    var coordSysClipArea = getClipArea(coord, data); // If there is clipPath created in large mode. Remove it.
+
+    group.removeClipPath(); // We don't use clipPath in normal mode because we needs a perfect animation
+    // And don't want the label are clipped.
+
+    var roundCap = seriesModel.get('roundCap', true);
+    var drawBackground = seriesModel.get('showBackground', true);
+    var backgroundModel = seriesModel.getModel('backgroundStyle');
+    var barBorderRadius = backgroundModel.get('borderRadius') || 0;
+    var bgEls = [];
+    var oldBgEls = this._backgroundEls;
+    var isInitSort = payload && payload.isInitSort;
+    var isChangeOrder = payload && payload.type === 'changeAxisOrder';
+
+    function createBackground(dataIndex) {
+      var bgLayout = getLayout[coord.type](data, dataIndex);
+      var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
+      bgEl.useStyle(backgroundModel.getItemStyle()); // Only cartesian2d support borderRadius.
+
+      if (coord.type === 'cartesian2d') {
+        bgEl.setShape('r', barBorderRadius);
+      }
+
+      bgEls[dataIndex] = bgEl;
+      return bgEl;
+    }
+    data.diff(oldData).add(function (dataIndex) {
+      var itemModel = data.getItemModel(dataIndex);
+      var layout = getLayout[coord.type](data, dataIndex, itemModel);
+
+      if (drawBackground) {
+        createBackground(dataIndex);
+      } // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
+
+
+      if (!data.hasValue(dataIndex) || !isValidLayout[coord.type](layout)) {
+        return;
+      }
+
+      var isClipped = false;
+
+      if (needsClip) {
+        // Clip will modify the layout params.
+        // And return a boolean to determine if the shape are fully clipped.
+        isClipped = clip[coord.type](coordSysClipArea, layout);
+      }
+
+      var el = elementCreator[coord.type](seriesModel, data, dataIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, false, roundCap);
+
+      if (realtimeSortCfg) {
+        /**
+         * Force label animation because even if the element is
+         * ignored because it's clipped, it may not be clipped after
+         * changing order. Then, if not using forceLabelAnimation,
+         * the label animation was never started, in which case,
+         * the label will be the final value and doesn't have label
+         * animation.
+         */
+        el.forceLabelAnimation = true;
+      }
+
+      updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
+
+      if (isInitSort) {
+        el.attr({
+          shape: layout
+        });
+      } else if (realtimeSortCfg) {
+        updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, dataIndex, isHorizontalOrRadial, false, false);
+      } else {
+        installCanvasRenderer.initProps(el, {
+          shape: layout
+        }, seriesModel, dataIndex);
+      }
+
+      data.setItemGraphicEl(dataIndex, el);
+      group.add(el);
+      el.ignore = isClipped;
+    }).update(function (newIndex, oldIndex) {
+      var itemModel = data.getItemModel(newIndex);
+      var layout = getLayout[coord.type](data, newIndex, itemModel);
+
+      if (drawBackground) {
+        var bgEl = void 0;
+
+        if (oldBgEls.length === 0) {
+          bgEl = createBackground(oldIndex);
+        } else {
+          bgEl = oldBgEls[oldIndex];
+          bgEl.useStyle(backgroundModel.getItemStyle()); // Only cartesian2d support borderRadius.
+
+          if (coord.type === 'cartesian2d') {
+            bgEl.setShape('r', barBorderRadius);
+          }
+
+          bgEls[newIndex] = bgEl;
+        }
+
+        var bgLayout = getLayout[coord.type](data, newIndex);
+        var shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
+        installCanvasRenderer.updateProps(bgEl, {
+          shape: shape
+        }, animationModel, newIndex);
+      }
+
+      var el = oldData.getItemGraphicEl(oldIndex);
+
+      if (!data.hasValue(newIndex) || !isValidLayout[coord.type](layout)) {
+        group.remove(el);
+        return;
+      }
+
+      var isClipped = false;
+
+      if (needsClip) {
+        isClipped = clip[coord.type](coordSysClipArea, layout);
+
+        if (isClipped) {
+          group.remove(el);
+        }
+      }
+
+      if (!el) {
+        el = elementCreator[coord.type](seriesModel, data, newIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, !!el, roundCap);
+      } else {
+        installCanvasRenderer.saveOldStyle(el);
+      }
+
+      if (realtimeSortCfg) {
+        el.forceLabelAnimation = true;
+      }
+
+      if (isChangeOrder) {
+        var textEl = el.getTextContent();
+
+        if (textEl) {
+          var labelInnerStore = installCanvasRenderer.labelInner(textEl);
+
+          if (labelInnerStore.prevValue != null) {
+            /**
+             * Set preValue to be value so that no new label
+             * should be started, otherwise, it will take a full
+             * `animationDurationUpdate` time to finish the
+             * animation, which is not expected.
+             */
+            labelInnerStore.prevValue = labelInnerStore.value;
+          }
+        }
+      } // Not change anything if only order changed.
+      // Especially not change label.
+      else {
+          updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
+        }
+
+      if (isInitSort) {
+        el.attr({
+          shape: layout
+        });
+      } else if (realtimeSortCfg) {
+        updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, newIndex, isHorizontalOrRadial, true, isChangeOrder);
+      } else {
+        installCanvasRenderer.updateProps(el, {
+          shape: layout
+        }, seriesModel, newIndex, null);
+      }
+
+      data.setItemGraphicEl(newIndex, el);
+      el.ignore = isClipped;
+      group.add(el);
+    }).remove(function (dataIndex) {
+      var el = oldData.getItemGraphicEl(dataIndex);
+      el && installCanvasRenderer.removeElementWithFadeOut(el, seriesModel, dataIndex);
+    }).execute();
+    var bgGroup = this._backgroundGroup || (this._backgroundGroup = new installCanvasRenderer.Group());
+    bgGroup.removeAll();
+
+    for (var i = 0; i < bgEls.length; ++i) {
+      bgGroup.add(bgEls[i]);
+    }
+
+    group.add(bgGroup);
+    this._backgroundEls = bgEls;
+    this._data = data;
+  };
+
+  BarView.prototype._renderLarge = function (seriesModel, ecModel, api) {
+    this._clear();
+
+    createLarge(seriesModel, this.group);
+
+    this._updateLargeClip(seriesModel);
+  };
+
+  BarView.prototype._incrementalRenderLarge = function (params, seriesModel) {
+    this._removeBackground();
+
+    createLarge(seriesModel, this.group, this._progressiveEls, true);
+  };
+
+  BarView.prototype._updateLargeClip = function (seriesModel) {
+    // Use clipPath in large mode.
+    var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
+    var group = this.group;
+
+    if (clipPath) {
+      group.setClipPath(clipPath);
+    } else {
+      group.removeClipPath();
+    }
+  };
+
+  BarView.prototype._enableRealtimeSort = function (realtimeSortCfg, data, api) {
+    var _this = this; // If no data in the first frame, wait for data to initSort
+
+
+    if (!data.count()) {
+      return;
+    }
+
+    var baseAxis = realtimeSortCfg.baseAxis;
+
+    if (this._isFirstFrame) {
+      this._dispatchInitSort(data, realtimeSortCfg, api);
+
+      this._isFirstFrame = false;
+    } else {
+      var orderMapping_1 = function (idx) {
+        var el = data.getItemGraphicEl(idx);
+        var shape = el && el.shape;
+        return shape && // The result should be consistent with the initial sort by data value.
+        // Do not support the case that both positive and negative exist.
+        Math.abs(baseAxis.isHorizontal() ? shape.height : shape.width) // If data is NaN, shape.xxx may be NaN, so use || 0 here in case
+        || 0;
+      };
+
+      this._onRendered = function () {
+        _this._updateSortWithinSameData(data, orderMapping_1, baseAxis, api);
+      };
+
+      api.getZr().on('rendered', this._onRendered);
+    }
+  };
+
+  BarView.prototype._dataSort = function (data, baseAxis, orderMapping) {
+    var info = [];
+    data.each(data.mapDimension(baseAxis.dim), function (ordinalNumber, dataIdx) {
+      var mappedValue = orderMapping(dataIdx);
+      mappedValue = mappedValue == null ? NaN : mappedValue;
+      info.push({
+        dataIndex: dataIdx,
+        mappedValue: mappedValue,
+        ordinalNumber: ordinalNumber
+      });
+    });
+    info.sort(function (a, b) {
+      // If NaN, it will be treated as min val.
+      return b.mappedValue - a.mappedValue;
+    });
+    return {
+      ordinalNumbers: installCanvasRenderer.map(info, function (item) {
+        return item.ordinalNumber;
+      })
+    };
+  };
+
+  BarView.prototype._isOrderChangedWithinSameData = function (data, orderMapping, baseAxis) {
+    var scale = baseAxis.scale;
+    var ordinalDataDim = data.mapDimension(baseAxis.dim);
+    var lastValue = Number.MAX_VALUE;
+
+    for (var tickNum = 0, len = scale.getOrdinalMeta().categories.length; tickNum < len; ++tickNum) {
+      var rawIdx = data.rawIndexOf(ordinalDataDim, scale.getRawOrdinalNumber(tickNum));
+      var value = rawIdx < 0 // If some tick have no bar, the tick will be treated as min.
+      ? Number.MIN_VALUE // PENDING: if dataZoom on baseAxis exits, is it a performance issue?
+      : orderMapping(data.indexOfRawIndex(rawIdx));
+
+      if (value > lastValue) {
+        return true;
+      }
+
+      lastValue = value;
+    }
+
+    return false;
+  };
+  /*
+   * Consider the case when A and B changed order, whose representing
+   * bars are both out of sight, we don't wish to trigger reorder action
+   * as long as the order in the view doesn't change.
+   */
+
+
+  BarView.prototype._isOrderDifferentInView = function (orderInfo, baseAxis) {
+    var scale = baseAxis.scale;
+    var extent = scale.getExtent();
+    var tickNum = Math.max(0, extent[0]);
+    var tickMax = Math.min(extent[1], scale.getOrdinalMeta().categories.length - 1);
+
+    for (; tickNum <= tickMax; ++tickNum) {
+      if (orderInfo.ordinalNumbers[tickNum] !== scale.getRawOrdinalNumber(tickNum)) {
+        return true;
+      }
+    }
+  };
+
+  BarView.prototype._updateSortWithinSameData = function (data, orderMapping, baseAxis, api) {
+    if (!this._isOrderChangedWithinSameData(data, orderMapping, baseAxis)) {
+      return;
+    }
+
+    var sortInfo = this._dataSort(data, baseAxis, orderMapping);
+
+    if (this._isOrderDifferentInView(sortInfo, baseAxis)) {
+      this._removeOnRenderedListener(api);
+
+      api.dispatchAction({
+        type: 'changeAxisOrder',
+        componentType: baseAxis.dim + 'Axis',
+        axisId: baseAxis.index,
+        sortInfo: sortInfo
+      });
+    }
+  };
+
+  BarView.prototype._dispatchInitSort = function (data, realtimeSortCfg, api) {
+    var baseAxis = realtimeSortCfg.baseAxis;
+
+    var sortResult = this._dataSort(data, baseAxis, function (dataIdx) {
+      return data.get(data.mapDimension(realtimeSortCfg.otherAxis.dim), dataIdx);
+    });
+
+    api.dispatchAction({
+      type: 'changeAxisOrder',
+      componentType: baseAxis.dim + 'Axis',
+      isInitSort: true,
+      axisId: baseAxis.index,
+      sortInfo: sortResult
+    });
+  };
+
+  BarView.prototype.remove = function (ecModel, api) {
+    this._clear(this._model);
+
+    this._removeOnRenderedListener(api);
+  };
+
+  BarView.prototype.dispose = function (ecModel, api) {
+    this._removeOnRenderedListener(api);
+  };
+
+  BarView.prototype._removeOnRenderedListener = function (api) {
+    if (this._onRendered) {
+      api.getZr().off('rendered', this._onRendered);
+      this._onRendered = null;
+    }
+  };
+
+  BarView.prototype._clear = function (model) {
+    var group = this.group;
+    var data = this._data;
+
+    if (model && model.isAnimationEnabled() && data && !this._isLargeDraw) {
+      this._removeBackground();
+
+      this._backgroundEls = [];
+      data.eachItemGraphicEl(function (el) {
+        installCanvasRenderer.removeElementWithFadeOut(el, model, installCanvasRenderer.getECData(el).dataIndex);
+      });
+    } else {
+      group.removeAll();
+    }
+
+    this._data = null;
+    this._isFirstFrame = true;
+  };
+
+  BarView.prototype._removeBackground = function () {
+    this.group.remove(this._backgroundGroup);
+    this._backgroundGroup = null;
+  };
+
+  BarView.type = 'bar';
+  return BarView;
+}(installCanvasRenderer.ChartView);
+
+var clip = {
+  cartesian2d: function (coordSysBoundingRect, layout) {
+    var signWidth = layout.width < 0 ? -1 : 1;
+    var signHeight = layout.height < 0 ? -1 : 1; // Needs positive width and height
+
+    if (signWidth < 0) {
+      layout.x += layout.width;
+      layout.width = -layout.width;
+    }
+
+    if (signHeight < 0) {
+      layout.y += layout.height;
+      layout.height = -layout.height;
+    }
+
+    var coordSysX2 = coordSysBoundingRect.x + coordSysBoundingRect.width;
+    var coordSysY2 = coordSysBoundingRect.y + coordSysBoundingRect.height;
+    var x = mathMax(layout.x, coordSysBoundingRect.x);
+    var x2 = mathMin(layout.x + layout.width, coordSysX2);
+    var y = mathMax(layout.y, coordSysBoundingRect.y);
+    var y2 = mathMin(layout.y + layout.height, coordSysY2);
+    var xClipped = x2 < x;
+    var yClipped = y2 < y; // When xClipped or yClipped, the element will be marked as `ignore`.
+    // But we should also place the element at the edge of the coord sys bounding rect.
+    // Because if data changed and the bar shows again, its transition animation
+    // will begin at this place.
+
+    layout.x = xClipped && x > coordSysX2 ? x2 : x;
+    layout.y = yClipped && y > coordSysY2 ? y2 : y;
+    layout.width = xClipped ? 0 : x2 - x;
+    layout.height = yClipped ? 0 : y2 - y; // Reverse back
+
+    if (signWidth < 0) {
+      layout.x += layout.width;
+      layout.width = -layout.width;
+    }
+
+    if (signHeight < 0) {
+      layout.y += layout.height;
+      layout.height = -layout.height;
+    }
+
+    return xClipped || yClipped;
+  },
+  polar: function (coordSysClipArea, layout) {
+    var signR = layout.r0 <= layout.r ? 1 : -1; // Make sure r is larger than r0
+
+    if (signR < 0) {
+      var tmp = layout.r;
+      layout.r = layout.r0;
+      layout.r0 = tmp;
+    }
+
+    var r = mathMin(layout.r, coordSysClipArea.r);
+    var r0 = mathMax(layout.r0, coordSysClipArea.r0);
+    layout.r = r;
+    layout.r0 = r0;
+    var clipped = r - r0 < 0; // Reverse back
+
+    if (signR < 0) {
+      var tmp = layout.r;
+      layout.r = layout.r0;
+      layout.r0 = tmp;
+    }
+
+    return clipped;
+  }
+};
+var elementCreator = {
+  cartesian2d: function (seriesModel, data, newIndex, layout, isHorizontal, animationModel, axisModel, isUpdate, roundCap) {
+    var rect = new installCanvasRenderer.Rect({
+      shape: installCanvasRenderer.extend({}, layout),
+      z2: 1
+    });
+    rect.__dataIndex = newIndex;
+    rect.name = 'item';
+
+    if (animationModel) {
+      var rectShape = rect.shape;
+      var animateProperty = isHorizontal ? 'height' : 'width';
+      rectShape[animateProperty] = 0;
+    }
+
+    return rect;
+  },
+  polar: function (seriesModel, data, newIndex, layout, isRadial, animationModel, axisModel, isUpdate, roundCap) {
+    var ShapeClass = !isRadial && roundCap ? SausagePath : installCanvasRenderer.Sector;
+    var sector = new ShapeClass({
+      shape: layout,
+      z2: 1
+    });
+    sector.name = 'item';
+    var positionMap = createPolarPositionMapping(isRadial);
+    sector.calculateTextPosition = createSectorCalculateTextPosition(positionMap, {
+      isRoundCap: ShapeClass === SausagePath
+    }); // Animation
+
+    if (animationModel) {
+      var sectorShape = sector.shape;
+      var animateProperty = isRadial ? 'r' : 'endAngle';
+      var animateTarget = {};
+      sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
+      animateTarget[animateProperty] = layout[animateProperty];
+      (isUpdate ? installCanvasRenderer.updateProps : installCanvasRenderer.initProps)(sector, {
+        shape: animateTarget // __value: typeof dataValue === 'string' ? parseInt(dataValue, 10) : dataValue
+
+      }, animationModel);
+    }
+
+    return sector;
+  }
+};
+
+function shouldRealtimeSort(seriesModel, coordSys) {
+  var realtimeSortOption = seriesModel.get('realtimeSort', true);
+  var baseAxis = coordSys.getBaseAxis();
+
+  if (realtimeSortOption && baseAxis.type === 'category' && coordSys.type === 'cartesian2d') {
+    return {
+      baseAxis: baseAxis,
+      otherAxis: coordSys.getOtherAxis(baseAxis)
+    };
+  }
+}
+
+function updateRealtimeAnimation(realtimeSortCfg, seriesAnimationModel, el, layout, newIndex, isHorizontal, isUpdate, isChangeOrder) {
+  var seriesTarget;
+  var axisTarget;
+
+  if (isHorizontal) {
+    axisTarget = {
+      x: layout.x,
+      width: layout.width
+    };
+    seriesTarget = {
+      y: layout.y,
+      height: layout.height
+    };
+  } else {
+    axisTarget = {
+      y: layout.y,
+      height: layout.height
+    };
+    seriesTarget = {
+      x: layout.x,
+      width: layout.width
+    };
+  }
+
+  if (!isChangeOrder) {
+    // Keep the original growth animation if only axis order changed.
+    // Not start a new animation.
+    (isUpdate ? installCanvasRenderer.updateProps : installCanvasRenderer.initProps)(el, {
+      shape: seriesTarget
+    }, seriesAnimationModel, newIndex, null);
+  }
+
+  var axisAnimationModel = seriesAnimationModel ? realtimeSortCfg.baseAxis.model : null;
+  (isUpdate ? installCanvasRenderer.updateProps : installCanvasRenderer.initProps)(el, {
+    shape: axisTarget
+  }, axisAnimationModel, newIndex);
+}
+
+function checkPropertiesNotValid(obj, props) {
+  for (var i = 0; i < props.length; i++) {
+    if (!isFinite(obj[props[i]])) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+var rectPropties = ['x', 'y', 'width', 'height'];
+var polarPropties = ['cx', 'cy', 'r', 'startAngle', 'endAngle'];
+var isValidLayout = {
+  cartesian2d: function (layout) {
+    return !checkPropertiesNotValid(layout, rectPropties);
+  },
+  polar: function (layout) {
+    return !checkPropertiesNotValid(layout, polarPropties);
+  }
+};
+var getLayout = {
+  // itemModel is only used to get borderWidth, which is not needed
+  // when calculating bar background layout.
+  cartesian2d: function (data, dataIndex, itemModel) {
+    var layout = data.getItemLayout(dataIndex);
+    var fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0; // fix layout with lineWidth
+
+    var signX = layout.width > 0 ? 1 : -1;
+    var signY = layout.height > 0 ? 1 : -1;
+    return {
+      x: layout.x + signX * fixedLineWidth / 2,
+      y: layout.y + signY * fixedLineWidth / 2,
+      width: layout.width - signX * fixedLineWidth,
+      height: layout.height - signY * fixedLineWidth
+    };
+  },
+  polar: function (data, dataIndex, itemModel) {
+    var layout = data.getItemLayout(dataIndex);
+    return {
+      cx: layout.cx,
+      cy: layout.cy,
+      r0: layout.r0,
+      r: layout.r,
+      startAngle: layout.startAngle,
+      endAngle: layout.endAngle,
+      clockwise: layout.clockwise
+    };
+  }
+};
+
+function isZeroOnPolar(layout) {
+  return layout.startAngle != null && layout.endAngle != null && layout.startAngle === layout.endAngle;
+}
+
+function createPolarPositionMapping(isRadial) {
+  return function (isRadial) {
+    var arcOrAngle = isRadial ? 'Arc' : 'Angle';
+    return function (position) {
+      switch (position) {
+        case 'start':
+        case 'insideStart':
+        case 'end':
+        case 'insideEnd':
+          return position + arcOrAngle;
+
+        default:
+          return position;
+      }
+    };
+  }(isRadial);
+}
+
+function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, isPolar) {
+  var style = data.getItemVisual(dataIndex, 'style');
+
+  if (!isPolar) {
+    el.setShape('r', itemModel.get(['itemStyle', 'borderRadius']) || 0);
+  }
+
+  el.useStyle(style);
+  var cursorStyle = itemModel.getShallow('cursor');
+  cursorStyle && el.attr('cursor', cursorStyle);
+  var labelPositionOutside = isPolar ? isHorizontalOrRadial ? layout.r >= layout.r0 ? 'endArc' : 'startArc' : layout.endAngle >= layout.startAngle ? 'endAngle' : 'startAngle' : isHorizontalOrRadial ? layout.height >= 0 ? 'bottom' : 'top' : layout.width >= 0 ? 'right' : 'left';
+  var labelStatesModels = installCanvasRenderer.getLabelStatesModels(itemModel);
+  installCanvasRenderer.setLabelStyle(el, labelStatesModels, {
+    labelFetcher: seriesModel,
+    labelDataIndex: dataIndex,
+    defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
+    inheritColor: style.fill,
+    defaultOpacity: style.opacity,
+    defaultOutsidePosition: labelPositionOutside
+  });
+  var label = el.getTextContent();
+
+  if (isPolar && label) {
+    var position = itemModel.get(['label', 'position']);
+    el.textConfig.inside = position === 'middle' ? true : null;
+    setSectorTextRotation(el, position === 'outside' ? labelPositionOutside : position, createPolarPositionMapping(isHorizontalOrRadial), itemModel.get(['label', 'rotate']));
+  }
+
+  installCanvasRenderer.setLabelValueAnimation(label, labelStatesModels, seriesModel.getRawValue(dataIndex), function (value) {
+    return getDefaultInterpolatedLabel(data, value);
+  });
+  var emphasisModel = itemModel.getModel(['emphasis']);
+  installCanvasRenderer.toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
+  installCanvasRenderer.setStatesStylesFromModel(el, itemModel);
+
+  if (isZeroOnPolar(layout)) {
+    el.style.fill = 'none';
+    el.style.stroke = 'none';
+    installCanvasRenderer.each(el.states, function (state) {
+      if (state.style) {
+        state.style.fill = state.style.stroke = 'none';
+      }
+    });
+  }
+} // In case width or height are too small.
+
+
+function getLineWidth(itemModel, rawLayout) {
+  // Has no border.
+  var borderColor = itemModel.get(['itemStyle', 'borderColor']);
+
+  if (!borderColor || borderColor === 'none') {
+    return 0;
+  }
+
+  var lineWidth = itemModel.get(['itemStyle', 'borderWidth']) || 0; // width or height may be NaN for empty data
+
+  var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
+  var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
+  return Math.min(lineWidth, width, height);
+}
+
+var LagePathShape =
+/** @class */
+function () {
+  function LagePathShape() {}
+
+  return LagePathShape;
+}();
+
+var LargePath =
+/** @class */
+function (_super) {
+  installCanvasRenderer.__extends(LargePath, _super);
+
+  function LargePath(opts) {
+    var _this = _super.call(this, opts) || this;
+
+    _this.type = 'largeBar';
+    return _this;
+  }
+
+  LargePath.prototype.getDefaultShape = function () {
+    return new LagePathShape();
+  };
+
+  LargePath.prototype.buildPath = function (ctx, shape) {
+    // Drawing lines is more efficient than drawing
+    // a whole line or drawing rects.
+    var points = shape.points;
+    var baseDimIdx = this.baseDimIdx;
+    var valueDimIdx = 1 - this.baseDimIdx;
+    var startPoint = [];
+    var size = [];
+    var barWidth = this.barWidth;
+
+    for (var i = 0; i < points.length; i += 3) {
+      size[baseDimIdx] = barWidth;
+      size[valueDimIdx] = points[i + 2];
+      startPoint[baseDimIdx] = points[i + baseDimIdx];
+      startPoint[valueDimIdx] = points[i + valueDimIdx];
+      ctx.rect(startPoint[0], startPoint[1], size[0], size[1]);
+    }
+  };
+
+  return LargePath;
+}(installCanvasRenderer.Path);
+
+function createLarge(seriesModel, group, progressiveEls, incremental) {
+  // TODO support polar
+  var data = seriesModel.getData();
+  var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
+  var largeDataIndices = data.getLayout('largeDataIndices');
+  var barWidth = data.getLayout('size');
+  var backgroundModel = seriesModel.getModel('backgroundStyle');
+  var bgPoints = data.getLayout('largeBackgroundPoints');
+
+  if (bgPoints) {
+    var bgEl = new LargePath({
+      shape: {
+        points: bgPoints
+      },
+      incremental: !!incremental,
+      silent: true,
+      z2: 0
+    });
+    bgEl.baseDimIdx = baseDimIdx;
+    bgEl.largeDataIndices = largeDataIndices;
+    bgEl.barWidth = barWidth;
+    bgEl.useStyle(backgroundModel.getItemStyle());
+    group.add(bgEl);
+    progressiveEls && progressiveEls.push(bgEl);
+  }
+
+  var el = new LargePath({
+    shape: {
+      points: data.getLayout('largePoints')
+    },
+    incremental: !!incremental,
+    ignoreCoarsePointer: true,
+    z2: 1
+  });
+  el.baseDimIdx = baseDimIdx;
+  el.largeDataIndices = largeDataIndices;
+  el.barWidth = barWidth;
+  group.add(el);
+  el.useStyle(data.getVisual('style')); // Enable tooltip and user mouse/touch event handlers.
+
+  installCanvasRenderer.getECData(el).seriesIndex = seriesModel.seriesIndex;
+
+  if (!seriesModel.get('silent')) {
+    el.on('mousedown', largePathUpdateDataIndex);
+    el.on('mousemove', largePathUpdateDataIndex);
+  }
+
+  progressiveEls && progressiveEls.push(el);
+} // Use throttle to avoid frequently traverse to find dataIndex.
+
+
+var largePathUpdateDataIndex = installCanvasRenderer.throttle(function (event) {
+  var largePath = this;
+  var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
+  installCanvasRenderer.getECData(largePath).dataIndex = dataIndex >= 0 ? dataIndex : null;
+}, 30, false);
+
+function largePathFindDataIndex(largePath, x, y) {
+  var baseDimIdx = largePath.baseDimIdx;
+  var valueDimIdx = 1 - baseDimIdx;
+  var points = largePath.shape.points;
+  var largeDataIndices = largePath.largeDataIndices;
+  var startPoint = [];
+  var size = [];
+  var barWidth = largePath.barWidth;
+
+  for (var i = 0, len = points.length / 3; i < len; i++) {
+    var ii = i * 3;
+    size[baseDimIdx] = barWidth;
+    size[valueDimIdx] = points[ii + 2];
+    startPoint[baseDimIdx] = points[ii + baseDimIdx];
+    startPoint[valueDimIdx] = points[ii + valueDimIdx];
+
+    if (size[valueDimIdx] < 0) {
+      startPoint[valueDimIdx] += size[valueDimIdx];
+      size[valueDimIdx] = -size[valueDimIdx];
+    }
+
+    if (x >= startPoint[0] && x <= startPoint[0] + size[0] && y >= startPoint[1] && y <= startPoint[1] + size[1]) {
+      return largeDataIndices[i];
+    }
+  }
+
+  return -1;
+}
+
+function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
+  if (isCoordinateSystemType(coord, 'cartesian2d')) {
+    var rectShape = layout;
+    var coordLayout = coord.getArea();
+    return {
+      x: isHorizontalOrRadial ? rectShape.x : coordLayout.x,
+      y: isHorizontalOrRadial ? coordLayout.y : rectShape.y,
+      width: isHorizontalOrRadial ? rectShape.width : coordLayout.width,
+      height: isHorizontalOrRadial ? coordLayout.height : rectShape.height
+    };
+  } else {
+    var coordLayout = coord.getArea();
+    var sectorShape = layout;
+    return {
+      cx: coordLayout.cx,
+      cy: coordLayout.cy,
+      r0: isHorizontalOrRadial ? coordLayout.r0 : sectorShape.r0,
+      r: isHorizontalOrRadial ? coordLayout.r : sectorShape.r,
+      startAngle: isHorizontalOrRadial ? sectorShape.startAngle : 0,
+      endAngle: isHorizontalOrRadial ? sectorShape.endAngle : Math.PI * 2
+    };
+  }
+}
+
+function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
+  var ElementClz = coord.type === 'polar' ? installCanvasRenderer.Sector : installCanvasRenderer.Rect;
+  return new ElementClz({
+    shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
+    silent: true,
+    z2: 0
+  });
+}
+
+function install(registers) {
+  registers.registerChartView(BarView);
+  registers.registerSeriesModel(BarSeriesModel);
+  registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, installCanvasRenderer.curry(installCanvasRenderer.layout$1, 'bar')); // Do layout after other overall layout, which can prepare some information.
+
+  registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, installCanvasRenderer.createProgressiveLayout('bar')); // Down sample after filter
+
+  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));
+  /**
+   * @payload
+   * @property {string} [componentType=series]
+   * @property {number} [dx]
+   * @property {number} [dy]
+   * @property {number} [zoom]
+   * @property {number} [originX]
+   * @property {number} [originY]
+   */
+
+  registers.registerAction({
+    type: 'changeAxisOrder',
+    event: 'changeAxisOrder',
+    update: 'update'
+  }, function (payload, ecModel) {
+    var componentType = payload.componentType || 'series';
+    ecModel.eachComponent({
+      mainType: componentType,
+      query: payload
+    }, function (componentModel) {
+      if (payload.sortInfo) {
+        componentModel.axis.setCategorySortInfo(payload.sortInfo);
+      }
+    });
+  });
+}
+
+var ValidColorNames;
+(function (ValidColorNames) {
+  ValidColorNames[ValidColorNames["aliceblue"] = 0] = "aliceblue";
+  ValidColorNames[ValidColorNames["antiquewhite"] = 1] = "antiquewhite";
+  ValidColorNames[ValidColorNames["aqua"] = 2] = "aqua";
+  ValidColorNames[ValidColorNames["aquamarine"] = 3] = "aquamarine";
+  ValidColorNames[ValidColorNames["azure"] = 4] = "azure";
+  ValidColorNames[ValidColorNames["beige"] = 5] = "beige";
+  ValidColorNames[ValidColorNames["bisque"] = 6] = "bisque";
+  ValidColorNames[ValidColorNames["black"] = 7] = "black";
+  ValidColorNames[ValidColorNames["blanchedalmond"] = 8] = "blanchedalmond";
+  ValidColorNames[ValidColorNames["blue"] = 9] = "blue";
+  ValidColorNames[ValidColorNames["blueviolet"] = 10] = "blueviolet";
+  ValidColorNames[ValidColorNames["brown"] = 11] = "brown";
+  ValidColorNames[ValidColorNames["burlywood"] = 12] = "burlywood";
+  ValidColorNames[ValidColorNames["cadetblue"] = 13] = "cadetblue";
+  ValidColorNames[ValidColorNames["chartreuse"] = 14] = "chartreuse";
+  ValidColorNames[ValidColorNames["chocolate"] = 15] = "chocolate";
+  ValidColorNames[ValidColorNames["coral"] = 16] = "coral";
+  ValidColorNames[ValidColorNames["cornflowerblue"] = 17] = "cornflowerblue";
+  ValidColorNames[ValidColorNames["cornsilk"] = 18] = "cornsilk";
+  ValidColorNames[ValidColorNames["crimson"] = 19] = "crimson";
+  ValidColorNames[ValidColorNames["cyan"] = 20] = "cyan";
+  ValidColorNames[ValidColorNames["darkblue"] = 21] = "darkblue";
+  ValidColorNames[ValidColorNames["darkcyan"] = 22] = "darkcyan";
+  ValidColorNames[ValidColorNames["darkgoldenrod"] = 23] = "darkgoldenrod";
+  ValidColorNames[ValidColorNames["darkgray"] = 24] = "darkgray";
+  ValidColorNames[ValidColorNames["darkgreen"] = 25] = "darkgreen";
+  ValidColorNames[ValidColorNames["darkkhaki"] = 26] = "darkkhaki";
+  ValidColorNames[ValidColorNames["darkmagenta"] = 27] = "darkmagenta";
+  ValidColorNames[ValidColorNames["darkolivegreen"] = 28] = "darkolivegreen";
+  ValidColorNames[ValidColorNames["darkorange"] = 29] = "darkorange";
+  ValidColorNames[ValidColorNames["darkorchid"] = 30] = "darkorchid";
+  ValidColorNames[ValidColorNames["darkred"] = 31] = "darkred";
+  ValidColorNames[ValidColorNames["darksalmon"] = 32] = "darksalmon";
+  ValidColorNames[ValidColorNames["darkseagreen"] = 33] = "darkseagreen";
+  ValidColorNames[ValidColorNames["darkslateblue"] = 34] = "darkslateblue";
+  ValidColorNames[ValidColorNames["darkslategray"] = 35] = "darkslategray";
+  ValidColorNames[ValidColorNames["darkturquoise"] = 36] = "darkturquoise";
+  ValidColorNames[ValidColorNames["darkviolet"] = 37] = "darkviolet";
+  ValidColorNames[ValidColorNames["deeppink"] = 38] = "deeppink";
+  ValidColorNames[ValidColorNames["deepskyblue"] = 39] = "deepskyblue";
+  ValidColorNames[ValidColorNames["dimgray"] = 40] = "dimgray";
+  ValidColorNames[ValidColorNames["dodgerblue"] = 41] = "dodgerblue";
+  ValidColorNames[ValidColorNames["firebrick"] = 42] = "firebrick";
+  ValidColorNames[ValidColorNames["floralwhite"] = 43] = "floralwhite";
+  ValidColorNames[ValidColorNames["forestgreen"] = 44] = "forestgreen";
+  ValidColorNames[ValidColorNames["fuchsia"] = 45] = "fuchsia";
+  ValidColorNames[ValidColorNames["gainsboro"] = 46] = "gainsboro";
+  ValidColorNames[ValidColorNames["ghostwhite"] = 47] = "ghostwhite";
+  ValidColorNames[ValidColorNames["gold"] = 48] = "gold";
+  ValidColorNames[ValidColorNames["goldenrod"] = 49] = "goldenrod";
+  ValidColorNames[ValidColorNames["gray"] = 50] = "gray";
+  ValidColorNames[ValidColorNames["green"] = 51] = "green";
+  ValidColorNames[ValidColorNames["greenyellow"] = 52] = "greenyellow";
+  ValidColorNames[ValidColorNames["honeydew"] = 53] = "honeydew";
+  ValidColorNames[ValidColorNames["hotpink"] = 54] = "hotpink";
+  ValidColorNames[ValidColorNames["indianred"] = 55] = "indianred";
+  ValidColorNames[ValidColorNames["indigo"] = 56] = "indigo";
+  ValidColorNames[ValidColorNames["ivory"] = 57] = "ivory";
+  ValidColorNames[ValidColorNames["khaki"] = 58] = "khaki";
+  ValidColorNames[ValidColorNames["lavender"] = 59] = "lavender";
+  ValidColorNames[ValidColorNames["lavenderblush"] = 60] = "lavenderblush";
+  ValidColorNames[ValidColorNames["lawngreen"] = 61] = "lawngreen";
+  ValidColorNames[ValidColorNames["lemonchiffon"] = 62] = "lemonchiffon";
+  ValidColorNames[ValidColorNames["lightblue"] = 63] = "lightblue";
+  ValidColorNames[ValidColorNames["lightcoral"] = 64] = "lightcoral";
+  ValidColorNames[ValidColorNames["lightcyan"] = 65] = "lightcyan";
+  ValidColorNames[ValidColorNames["lightgoldenrodyellow"] = 66] = "lightgoldenrodyellow";
+  ValidColorNames[ValidColorNames["lightgrey"] = 67] = "lightgrey";
+  ValidColorNames[ValidColorNames["lightgreen"] = 68] = "lightgreen";
+  ValidColorNames[ValidColorNames["lightpink"] = 69] = "lightpink";
+  ValidColorNames[ValidColorNames["lightsalmon"] = 70] = "lightsalmon";
+  ValidColorNames[ValidColorNames["lightseagreen"] = 71] = "lightseagreen";
+  ValidColorNames[ValidColorNames["lightskyblue"] = 72] = "lightskyblue";
+  ValidColorNames[ValidColorNames["lightslategray"] = 73] = "lightslategray";
+  ValidColorNames[ValidColorNames["lightsteelblue"] = 74] = "lightsteelblue";
+  ValidColorNames[ValidColorNames["lightyellow"] = 75] = "lightyellow";
+  ValidColorNames[ValidColorNames["lime"] = 76] = "lime";
+  ValidColorNames[ValidColorNames["limegreen"] = 77] = "limegreen";
+  ValidColorNames[ValidColorNames["linen"] = 78] = "linen";
+  ValidColorNames[ValidColorNames["magenta"] = 79] = "magenta";
+  ValidColorNames[ValidColorNames["maroon"] = 80] = "maroon";
+  ValidColorNames[ValidColorNames["mediumaquamarine"] = 81] = "mediumaquamarine";
+  ValidColorNames[ValidColorNames["mediumblue"] = 82] = "mediumblue";
+  ValidColorNames[ValidColorNames["mediumorchid"] = 83] = "mediumorchid";
+  ValidColorNames[ValidColorNames["mediumpurple"] = 84] = "mediumpurple";
+  ValidColorNames[ValidColorNames["mediumseagreen"] = 85] = "mediumseagreen";
+  ValidColorNames[ValidColorNames["mediumslateblue"] = 86] = "mediumslateblue";
+  ValidColorNames[ValidColorNames["mediumspringgreen"] = 87] = "mediumspringgreen";
+  ValidColorNames[ValidColorNames["mediumturquoise"] = 88] = "mediumturquoise";
+  ValidColorNames[ValidColorNames["mediumvioletred"] = 89] = "mediumvioletred";
+  ValidColorNames[ValidColorNames["midnightblue"] = 90] = "midnightblue";
+  ValidColorNames[ValidColorNames["mintcream"] = 91] = "mintcream";
+  ValidColorNames[ValidColorNames["mistyrose"] = 92] = "mistyrose";
+  ValidColorNames[ValidColorNames["moccasin"] = 93] = "moccasin";
+  ValidColorNames[ValidColorNames["navajowhite"] = 94] = "navajowhite";
+  ValidColorNames[ValidColorNames["navy"] = 95] = "navy";
+  ValidColorNames[ValidColorNames["oldlace"] = 96] = "oldlace";
+  ValidColorNames[ValidColorNames["olive"] = 97] = "olive";
+  ValidColorNames[ValidColorNames["olivedrab"] = 98] = "olivedrab";
+  ValidColorNames[ValidColorNames["orange"] = 99] = "orange";
+  ValidColorNames[ValidColorNames["orangered"] = 100] = "orangered";
+  ValidColorNames[ValidColorNames["orchid"] = 101] = "orchid";
+  ValidColorNames[ValidColorNames["palegoldenrod"] = 102] = "palegoldenrod";
+  ValidColorNames[ValidColorNames["palegreen"] = 103] = "palegreen";
+  ValidColorNames[ValidColorNames["paleturquoise"] = 104] = "paleturquoise";
+  ValidColorNames[ValidColorNames["palevioletred"] = 105] = "palevioletred";
+  ValidColorNames[ValidColorNames["papayawhip"] = 106] = "papayawhip";
+  ValidColorNames[ValidColorNames["peachpuff"] = 107] = "peachpuff";
+  ValidColorNames[ValidColorNames["peru"] = 108] = "peru";
+  ValidColorNames[ValidColorNames["pink"] = 109] = "pink";
+  ValidColorNames[ValidColorNames["plum"] = 110] = "plum";
+  ValidColorNames[ValidColorNames["powderblue"] = 111] = "powderblue";
+  ValidColorNames[ValidColorNames["purple"] = 112] = "purple";
+  ValidColorNames[ValidColorNames["red"] = 113] = "red";
+  ValidColorNames[ValidColorNames["rosybrown"] = 114] = "rosybrown";
+  ValidColorNames[ValidColorNames["royalblue"] = 115] = "royalblue";
+  ValidColorNames[ValidColorNames["saddlebrown"] = 116] = "saddlebrown";
+  ValidColorNames[ValidColorNames["salmon"] = 117] = "salmon";
+  ValidColorNames[ValidColorNames["sandybrown"] = 118] = "sandybrown";
+  ValidColorNames[ValidColorNames["seagreen"] = 119] = "seagreen";
+  ValidColorNames[ValidColorNames["seashell"] = 120] = "seashell";
+  ValidColorNames[ValidColorNames["sienna"] = 121] = "sienna";
+  ValidColorNames[ValidColorNames["silver"] = 122] = "silver";
+  ValidColorNames[ValidColorNames["skyblue"] = 123] = "skyblue";
+  ValidColorNames[ValidColorNames["slateblue"] = 124] = "slateblue";
+  ValidColorNames[ValidColorNames["slategray"] = 125] = "slategray";
+  ValidColorNames[ValidColorNames["snow"] = 126] = "snow";
+  ValidColorNames[ValidColorNames["springgreen"] = 127] = "springgreen";
+  ValidColorNames[ValidColorNames["steelblue"] = 128] = "steelblue";
+  ValidColorNames[ValidColorNames["tan"] = 129] = "tan";
+  ValidColorNames[ValidColorNames["teal"] = 130] = "teal";
+  ValidColorNames[ValidColorNames["thistle"] = 131] = "thistle";
+  ValidColorNames[ValidColorNames["tomato"] = 132] = "tomato";
+  ValidColorNames[ValidColorNames["turquoise"] = 133] = "turquoise";
+  ValidColorNames[ValidColorNames["violet"] = 134] = "violet";
+  ValidColorNames[ValidColorNames["wheat"] = 135] = "wheat";
+  ValidColorNames[ValidColorNames["white"] = 136] = "white";
+  ValidColorNames[ValidColorNames["whitesmoke"] = 137] = "whitesmoke";
+  ValidColorNames[ValidColorNames["yellow"] = 138] = "yellow";
+  ValidColorNames[ValidColorNames["yellowgreen"] = 139] = "yellowgreen";
+})(ValidColorNames || (ValidColorNames = {}));
+function isValidColor(color) {
+  const hexRegex = new RegExp('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$');
+  const isValidHex = hexRegex.test(color);
+  const isValidCSSColorName = !!ValidColorNames[color];
+  return isValidHex || isValidCSSColorName;
+}
+function getCSSProperty(name, containerStyles, hostElementStyles) {
+  if (!name)
+    return;
+  let fallback;
+  if (name.startsWith('var(') && name.endsWith(')')) {
+    const regExp = /var\((.*)\)/g;
+    const result = regExp.exec(name);
+    const split = result.length >= 2 ? result[1].split(',') : [];
+    name = split[0];
+    fallback = split[1];
+  }
+  let result = containerStyles.getPropertyValue(name).trim();
+  if (!result)
+    result = hostElementStyles.getPropertyValue(name).trim();
+  return result || fallback;
+}
+function formatValue(value, format) {
+  const valueAsFloat = parseFloat(value.toString());
+  if (isNaN(valueAsFloat))
+    return;
+  const decimals = isNaN(+format.decimals) ? 0 : +format.decimals;
+  if (format.type === 'currency') {
+    return Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: decimals,
+      minimumFractionDigits: decimals,
+    }).format(valueAsFloat);
+  }
+  else {
+    return Intl.NumberFormat('en-US').format(valueAsFloat);
+  }
+}
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center}.chart-container{width:100%;height:100%}";
+
+installCanvasRenderer.use([installCanvasRenderer.install$1, install, installCanvasRenderer.install$2, installCanvasRenderer.installLabelLayout, install$2, install$1]);
+const Q2ChartBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.data = [];
+    this.alignChartName = undefined;
+    this.chartName = undefined;
+    this.color = undefined;
+    this.dataNamesOverflow = undefined;
+    this.dataNamesWidth = undefined;
+    this.format = undefined;
+    this.formatModifier = undefined;
+    this.hideBarLabels = false;
+    this.hideValueAxisLabels = false;
+    this.offsetDataNames = false;
+    this.offsetDataValues = false;
+    this.orientation = undefined;
+    this.showChartName = false;
+    this.sort = false;
+  }
+  componentDidLoad() {
+    const chart = installCanvasRenderer.init(this.chartContainer);
+    this.chart = chart;
+    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
+    this.resizeObserver.observe(this.hostElement);
+    this.cacheComputedStyles();
+    this.updateChart(chart);
+    index$1.overrideFocus(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  getColor(color) {
+    const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);
+    const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);
+    const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);
+    if (cssColorProp)
+      return cssColorProp;
+    if (isValidColor(color))
+      return color;
+    if (seriesColor)
+      return seriesColor;
+    if (isValidColor(this.color))
+      return this.color;
+    return primaryColor;
+  }
+  processData(data) {
+    return data.map(datum => {
+      return {
+        value: datum.value || 0,
+        itemStyle: {
+          color: this.getColor(datum.color),
+        },
+      };
+    });
+  }
+  updateChart(chart) {
+    var _a;
+    const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+    const valueAxis = {
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => formatValue(value, {
+          type: this.format,
+          decimals,
+        }),
+        rotate: this.offsetDataValues ? 45 : 0,
+        margin: this.offsetDataValues ? 15 : 8,
+        show: !this.hideValueAxisLabels,
+      },
+    };
+    const categoryAxis = {
+      type: 'category',
+      data: this.data.map(datum => index$1.loc(datum.name) || ''),
+      axisLabel: {
+        rotate: this.offsetDataNames ? 45 : 0,
+        margin: this.offsetDataNames ? 15 : 8,
+        interval: 0,
+        width: this.dataNamesWidth || 50,
+        overflow: this.dataNamesOverflow || 'none',
+        truncate: 'ellipsis',
+      },
+      axisTick: {
+        alignWithLabel: this.offsetDataNames,
+      },
+    };
+    return chart.setOption({
+      aria: {
+        enabled: true,
+      },
+      title: {
+        text: this.chartName,
+        show: this.showChartName,
+        left: this.alignChartName,
+      },
+      grid: {
+        containLabel: true,
+      },
+      xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,
+      yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,
+      series: [
+        {
+          data: this.processData(this.data),
+          id: 'bar',
+          type: 'bar',
+          label: {
+            show: !this.hideBarLabels,
+            position: 'top',
+            fontWeight: 'bold',
+            formatter: (params) => {
+              return formatValue(params.value, {
+                type: this.format,
+                decimals,
+              });
+            },
+          },
+          realtimeSort: this.sort,
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  render() {
+    return (index.h("div", { class: "container" }, index.h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "barChartContainer" })));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "chartName": ["propsUpdates"],
+    "color": ["propsUpdates"],
+    "hideBarLabels": ["propsUpdates"],
+    "showChartName": ["propsUpdates"],
+    "alignChartName": ["propsUpdates"],
+    "orientation": ["propsUpdates"],
+    "format": ["propsUpdates"],
+    "sort": ["propsUpdates"],
+    "data": ["propsUpdates"],
+    "offsetDataNames": ["propsUpdates"],
+    "hideValueAxisLabels": ["propsUpdates"],
+    "formatModifier": ["propsUpdates"],
+    "dataNamesOverflow": ["propsUpdates"]
+  }; }
+};
+Q2ChartBar.style = stylesCss;
+
+exports.q2_chart_bar = Q2ChartBar;