diff --git a/src/js/charts/BaseChart.js b/src/js/charts/BaseChart.js index 542f4c80..6c266e72 100644 --- a/src/js/charts/BaseChart.js +++ b/src/js/charts/BaseChart.js @@ -1,5 +1,5 @@ import SvgTip from '../objects/SvgTip'; -import { $, isElementInViewport, getElementContentWidth } from '../utils/dom'; +import { $, isElementInViewport, getElementContentWidth, isHidden } from '../utils/dom'; import { makeSVGContainer, makeSVGDefs, makeSVGGroup, makeText } from '../utils/draw'; import { BASE_MEASURES, getExtraHeight, getExtraWidth, getTopOffset, getLeftOffset, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT, DEFAULT_COLORS} from '../utils/constants'; @@ -134,6 +134,10 @@ export default class BaseChart { bindTooltip() {} draw(onlyWidthChange=false, init=false) { + if (onlyWidthChange && isHidden(this.parent)) { + // Don't update anything if the chart is hidden + return; + } this.updateWidth(); this.calc(onlyWidthChange); diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 8d0cd57d..91cd2a78 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -54,6 +54,13 @@ export function getOffset(element) { }; } +// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent +// an element's offsetParent property will return null whenever it, or any of its parents, +// is hidden via the display style property. +export function isHidden(el) { + return (el.offsetParent === null); +} + export function isElementInViewport(el) { // Although straightforward: https://stackoverflow.com/a/7557433/6495043 var rect = el.getBoundingClientRect();