AnyChart
Black border around graph as shown in attached image
Hmm the problem is that the <clipPath> stroke is set to black. Removing that before exporting seems to fix the problem
@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?
@Shestac92 I am using the latest AnyChart NodeJS on npm. No it doesn't have a similar border when rendered on browser.
@bluejamesbond I'm afraid we need additional details. Could you provide us your chart configuration code which you export to an image?
Additionally, I have seen this happen as well (alpha channel is not respected). Any ideas?
@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?
So just to clarify 2 issues:
- 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",
- 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);
@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]
With everything the same, [email protected]
