Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Black border around graph as shown in attached image #7

Open
mathew-kurian opened this issue Apr 7, 2018 · 9 comments
Open

Black border around graph as shown in attached image #7

mathew-kurian opened this issue Apr 7, 2018 · 9 comments

Comments

@mathew-kurian
Copy link

How to remove the following black border around image?

byofhwljm
@mathew-kurian
Copy link
Author

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

@Shestac92
Copy link

@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
Copy link
Author

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

@Shestac92
Copy link

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

@mathew-kurian
Copy link
Author

This was the chart code https://playground.anychart.com/xDpx1CHW/1

@mathew-kurian
Copy link
Author

mathew-kurian commented Apr 11, 2018 •
edited
Loading

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

@Shestac92
Copy link

@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
Copy link
Author

mathew-kurian commented Apr 11, 2018 •
edited
Loading

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
Copy link
Author

mathew-kurian commented Apr 11, 2018 •
edited
Loading

@Shestac92 For issue (2) mentioned in the last comment, it looks like a dependency issue. Using [email protected] works and respects the alpha channel however [email protected] (latest) does not. Notice the 2 images below:

With everything the same, [email protected]
38595067-71b96b44-3cfe-11e8-9f2c-5a8d8d366130

With everything the same, [email protected]
b1gkf4iog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mathew-kurian @Shestac92