Merge branch 'master' of https://github.com/apexcharts/apexcharts.js

src/apexcharts.js

@@ -686,9 +686,9 @@ export default class ApexCharts {
     this.localization.setCurrentLocaleValues(localeName)
   }
 
-  dataURI() {
+  dataURI(options) {
     const exp = new Exports(this.ctx)
-    return exp.dataURI()
+    return exp.dataURI(options)
   }
 
   paper() {

src/modules/Exports.js

@@ -9,6 +9,16 @@ class Exports {
     this.w = ctx.w
   }
 
+  scaleSvgNode = (svg, scale) => {
+    // get current both width and height of the svg
+    let svgWidth = parseFloat(svg.getAttributeNS(null, 'width'))
+    let svgHeight = parseFloat(svg.getAttributeNS(null, 'height'))
+    // set new width and height based on the scale
+    svg.setAttributeNS(null, 'width', svgWidth * scale)
+    svg.setAttributeNS(null, 'height', svgHeight * scale)
+    svg.setAttributeNS(null, 'viewBox', '0 0 ' + svgWidth + ' ' + svgHeight)
+  }
+
   fixSvgStringForIe11(svgData) {
     // IE11 generates broken SVG that we have to fix by using regex
     if (!Utils.isIE11()) {
@@ -36,8 +46,17 @@ class Exports {
     return result
   }
 
-  getSvgString() {
-    const svgString = this.w.globals.dom.Paper.svg()
+  getSvgString(scale) {
+    let svgString = this.w.globals.dom.Paper.svg()
+    // in case the scale is different than 1, the svg needs to be rescaled
+    if (scale !== 1) {
+      // clone the svg node so it remains intact in the UI
+      const svgNode = this.w.globals.dom.Paper.node.cloneNode(true)
+      // scale the image
+      this.scaleSvgNode(svgNode, scale)
+      // get the string representation of the svgNode
+      svgString = new XMLSerializer().serializeToString(svgNode)
+    }
     return this.fixSvgStringForIe11(svgString)
   }
 
@@ -77,14 +96,18 @@ class Exports {
     return URL.createObjectURL(svgBlob)
   }
 
-  dataURI() {
+  dataURI(options) {
     return new Promise((resolve) => {
       const w = this.w
 
+      const scale = options
+        ? options.scale || options.width / w.globals.svgWidth
+        : 1
+
       this.cleanup()
       const canvas = document.createElement('canvas')
-      canvas.width = w.globals.svgWidth
-      canvas.height = parseInt(w.globals.dom.elWrap.style.height, 10) // because of resizeNonAxisCharts
+      canvas.width = w.globals.svgWidth * scale
+      canvas.height = parseInt(w.globals.dom.elWrap.style.height, 10) * scale // because of resizeNonAxisCharts
 
       const canvasBg =
         w.config.chart.background === 'transparent'
@@ -93,9 +116,9 @@ class Exports {
 
       let ctx = canvas.getContext('2d')
       ctx.fillStyle = canvasBg
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.fillRect(0, 0, canvas.width * scale, canvas.height * scale)
 
-      const svgData = this.getSvgString()
+      const svgData = this.getSvgString(scale)
 
       if (window.canvg && Utils.isIE11()) {
         // use canvg as a polyfill to workaround ie11 considering a canvas with loaded svg 'unsafe'

types/apexcharts.d.ts

@@ -40,7 +40,7 @@ declare class ApexCharts {
   addPointAnnotation(options: any, pushToMemory?: boolean, context?: any): void
   removeAnnotation(id: string, options?: any): void
   clearAnnotations(options?: any): void
-  dataURI(): Promise<void>
+  dataURI(options?: { scale?: number, width?: number }): Promise<void>
   static exec(chartID: string, fn: string, ...args: Array<any>): any
   static initOnLoad(): void
 }

yarn.lock

@@ -3824,9 +3824,9 @@ hoopy@^0.1.4:
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
 hosted-git-info@^2.1.4:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
 hsl-regex@^1.0.0:
   version "1.0.0"