Incubator-echarts: Support for inline charts - 'sparklines'

[softwords]

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_.

[plainheart]

I think it's easy and practical to set display of echarts container(element).
There is An example on CodePen

Is it necessary to be supported by ECharts?

[softwords]

@plainheart : thankyou for your quick reply. You are totally right , this is much easier than I was making it out to be. The secret in your solution is the use of display:inline-block, not display:inline which I was trying to make work. @pissang , maybe this does not deserve a new feature after all - I'm satisfied with the method from @plainheart ....

[softwords]

I am closing this issue because the solution from @plainheart does everything needed to generate inline sparklines without any modification required to echarts.