softwords opened a new issue #12714: URL: https://github.com/apache/incubator-echarts/issues/12714
### What problem does this feature solve? The term 'sparkline' was first used by Edward Tufte, who defined a sparkline in this way: _A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography._ see https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR In html, for a chart to be embedded as Tufte describes, then that chart must be **inline**; that is, it should have css style `display:inline` So in order to make a genuine sparkline with echarts, we need to be able to make the echart inline. To attempt this, we can build the echart on an inline element - e.g. `<span>` instead of `<div>` The first complication this creates is that an inline element cannot be given height or width; so a sparkline created with echarts will need to get its height and width from the config; e.g (using svg): ``` echarts.init(element, null, {renderer: 'svg', height: 20, width 80}) ``` When echarts generates the chart, we see this in the generated html: ``` <div style="overflow: hidden; position: relative; width: 80px; height: 20px; background: transparent; cursor: pointer;"> <svg xmlns="http://www.w3.org/2000/svg"; version="1.1" baseProfile="full" width="80" height="20" style="user-select: none; position: absolute; left: 0px; top: 0px;"> ``` This object is not inline, because the generated `<div>` has `display:block` by default, and the generated `<svg>` has `position:absolute` We can use css to reach into this generated html and change it, like this: ``` <style> .sparkline div { display: inline } .sparkline svg { position:relative !important } ``` where the echart is created on a span with class sparkline: ```<span class="sparkline"/>``` In echarts 4.7, this workaround will give an inline chart. But it would be preferable to have this functionality available in echarts by configuration. ### What does the proposed API look like? Add a new member `display` to the configuration object passed to `echarts.init()` display : 'block' or 'inline' - default is 'block' This setting causes the appropriate changes to the `style` attributes of the generated `<div>` and `<svg>` e.g. sample use: ``` let config = { renderer: "svg", height: 40, width: 100, display: 'inline' } ``` In html it will look like ``` <p>Here is my embedded<span id="mySparkline"/> echart</p> ``` where the echart is instantiated on the `<span>` _mySparkline_. <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE --> <!-- This issue is in English. DO NOT REMOVE --> ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
