search

n3-charts / line-chart

Awesome charts for AngularJS.
http://n3-charts.github.io/line-chart/
MIT License
1.2k stars 180 forks source link

Issues with rendering n3-charts axes, duplicate labels #528

Closed mrizescu closed 7 years ago

mrizescu commented 7 years ago

I encounter issues when exporting to canvas or svg file the svg generated with n3-charts, the x and y axes have duplicated labels (however y-2 labels are ok) . Looking at the n3-chart line series example, if I copy the svg element and paste it in a fiddle like canvg playground http://jsfiddle.net/6r2jug6o/ on render the labels on the left y axis are doubled. Is there a fix for this issue?

mrizescu commented 7 years ago

Hello. Just to add that I notice the same issue with duplicated axes labels when using the SVG Crowbar bookmarklet from http://nytimes.github.io/svg-crowbar/ in Chrome to download/save as SVG the charts from your Examples page. If you have any suggestion for any workaround or fix please let me know. I am just trying to find a way to save the charts as SVG and then export to png image (ref. #326) but the solution suggested there does not seem to work well with v2.

lorem--ipsum commented 7 years ago

Hi ! Your jsFiddle link is empty, could you double check it please ?

mrizescu commented 7 years ago

Hi! Here is the updated fiddle link http://jsfiddle.net/4gwuy7vt/ The svg is from the n3-charts line series example. Note the doubled y axes labels. I get the same result when using SVG Crowbar and download the image. Thanks for looking at this. Great library!

lorem--ipsum commented 7 years ago

Okay that's because of the grids. They are hidden by the CSS, but since you're only exporting the actual SVG, they're visible. In v1, the styling was inline (like, in style attributes here and there) and this would have worked. I suppose we could implement an option to style stuff inline for this kind of usecase, although I'm not sure about the amount of work required.

Edit : oh yeah, the grids are actually axes, but with super long ticks, in a nutshell. Their labels are what's supposed to be hidden by the CSS.

mrizescu commented 7 years ago

Okay I see. Yes turning off the grids fixes the issues. Thanks! Currently there is no other way to export as image the grids chart without running into the labels issue, right?

lorem--ipsum commented 7 years ago

I don't think so, no, at least not by relying on the SVG. PhantomJS allows to take screenshot programmatically, but maybe you want to stay 100% client-side ?

mrizescu commented 7 years ago

Okay. Thanks. I will look into possibly using PhantomJS.