Comments (4)
Your issue is that if you do more than one line-break, it only displays one, right?
from highcharts-export-clientside.
Tried to use the latest canvg
instead of the old canvas-tools
, no dice: http://jsfiddle.net/pscjzhe4/213/
from highcharts-export-clientside.
Got it working with a small trick! Just add two empty spaces between two br
http://jsfiddle.net/pscjzhe4/214/
from highcharts-export-clientside.
For reference, the issue is probably located somewhere between the SVG generation of HTML content and the canvg
rendering part.
Here's the SVG text part without your fix:
<text x="8" style="color:#ffffff;fill:#ffffff;" y="20"><tspan>Max observation</tspan><tspan x="8" dy="15">Next row</tspan>
With your fix:
<text x="8" style="color:#ffffff;fill:#ffffff;" y="20"><tspan>Max observation</tspan><tspan x="8" dy="15"> </tspan><tspan x="8" dy="15">Next row</tspan></text>
Both rendered with canvg
here: http://jsfiddle.net/8k94vfkz/1/
My guess is that canvg
is correct, Highcharts isn't. In the first snippet, second tspan
should have dy="30"
is the line-height is expected to be 15.
The second snippet fixes things by introducing an empty tspan
with its own dy
attribute which means an Y-axis relative displacement. But relative to what? canvg
adds it to the current position ( https://github.com/gabelerner/canvg/blob/master/canvg.js#L2159 ). Which seems to be what the specs say:
If a single is provided, this value represents the new relative X coordinate for the current text position for rendering the glyphs corresponding to the first character within this element or any of its descendants. The current text position is shifted along the x-axis of the current user coordinate system by before the first character's glyphs are rendered.
– http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute
from highcharts-export-clientside.
Related Issues (20)
- typeerror: c is undefined HOT 1
- Exporting not working in a mobile browser HOT 8
- Need support in exporting highcharts HOT 2
- Support NPM / Browserify HOT 13
- ESLint: global variables
- Misleading information HOT 6
- Support for exporting multiple charts? HOT 5
- Dependency issue
- Support for EDGE HOT 2
- dsahStyle not used in exported chart HOT 4
- canvas-tools.js isn't supposed to be included in a script file?
- xls export does not work anymore HOT 1
- New version of highcharts (V4.2.7) has breaking changes HOT 1
- Whitespace in PDF Export HOT 1
- Highcharts.exporting.USE_TITLE_FOR_FILENAME broken with CSV and XLS HOT 2
- Export to PDF is causing errors and saving a blank PDF
- create a package.json and publish to npm HOT 1
- How do I override to just allow PNG and JPEG? HOT 1
- The file you are trying to open is in a different format than specified by the file extension
- Export chart to excel
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-export-clientside.