AnyChart/AnyChart-NodeJS

Black border around graph as shown in attached image

mathew-kurian opened this issue · 9 comments

mathew-kurian commented

How to remove the following black border around image?

byofhwljm

mathew-kurian commented

Hmm the problem is that the <clipPath> stroke is set to black. Removing that before exporting seems to fix the problem

Shestac92 commented

@bluejamesbond
Can you specify the library version and export method do you use? Also, do you have a similar border before exporting the chart to an image?

mathew-kurian commented

@Shestac92 I am using the latest AnyChart NodeJS on npm. No it doesn't have a similar border when rendered on browser.

Shestac92 commented

@bluejamesbond
I'm afraid we need additional details. Could you provide us your chart configuration code which you export to an image?

mathew-kurian commented

Additionally, I have seen this happen as well (alpha channel is not respected). Any ideas?

Shestac92 commented

@bluejamesbond
Do you set exactly this JS code to the export server or you use SVG? Can you provide us exactly the code, that you set to the export?
Also, can you provide us dependencies from your project's package.json?

mathew-kurian commented

So just to clarify 2 issues:

  1. the black border around the image (which was resolved with the modification in the repo)
// to fix the black border
"anychart-nodejs": "https://github.com/bluejamesbond/AnyChart-NodeJS#master",
"jsdom": "^11.7.0",
  1. i updated my machine and tried the code again. however, it the latest versions of the imagemagick + librsvg. the export doesn't see respect the alpha channel of colors
// same package.json as above

Version: ImageMagick 7.0.7-28 Q16 x86_64 2018-03-25 http://www.imagemagick.org
Copyright: © 1999-2018 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules
Delegates (built-in): bzlib freetype jng jpeg ltdl lzma png tiff xml zlib

Export code is the same in both issues


  const jsdom = new JSDOM(
    '<body><div id="container" style="width:1000px;height:600px;"></div></body>',
    {
      runScripts: 'dangerously'
    }
  );

  const window = jsdom.window;
  const anychart = require('anychart')(window);
  const anychartExport = require('anychart-nodejs')(anychart);


  const dateTimeScale = anychart.scales.dateTime();
  const dateTimeTicks = dateTimeScale.ticks();
  // dateTimeTicks.interval(0, 6);

  // jsData is defined in code from the playground link attached above
  const chart = anychart.fromJson(jsData); 

  // enable grid
  chart.yGrid(true);
  chart.yGrid().palette(['#AAA']);
  chart.yGrid().stroke({ color: '#FFF', thickness: 2 });

  chart.xScale(dateTimeScale);
  chart.padding(20);
  chart.bounds(0, 0, 2000, 1200);
  chart.container('container');

  chart.draw();

  const image = await anychartExport.exportTo(chart, { outputType: 'png' });
  const imageDir = path.join(__dirname, '../public/images/charts');
  const imagePath = path.join(imageDir, `${shortId.generate()}.png`);

  await fse.ensureDir(imageDir);

  fs.writeFileSync(imagePath, image);
mathew-kurian commented

@Shestac92 For issue (2) mentioned in the last comment, it looks like a dependency issue. Using imagemagick@7.0.7-22 works and respects the alpha channel however imagemagick@7.0.7-28 (latest) does not. Notice the 2 images below:

With everything the same, imagemagick@7.0.7-28
38595067-71b96b44-3cfe-11e8-9f2c-5a8d8d366130

With everything the same, imagemagick@7.0.7-22
b1gkf4iog