React Sparklines

Beautiful and expressive sparklines component for React View on GitHub

npm install react-sparklines

Simple

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Simple Curve

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesCurve</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Customizable

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">color</span><span class="pun">=</span><span class="atv">"#253e56"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Spots

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">color</span><span class="pun">=</span><span class="atv">"#56b45d"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#56b45d"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">margin</span><span class="pun">=</span><span class="atv">{6}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">strokeWidth</span><span class="pln">: 3, </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#336aff"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">{4}</span><span class="pln">
        </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#336aff"</span><span class="pln">, </span><span class="atn">strokeWidth</span><span class="pln">: 3, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"white"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Bounds

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">max</span><span class="pun">=</span><span class="atv">{0.5}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Bars

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#41c3f9"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"white"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#41c3f9"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">".25"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#41c3f9"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Dynamic

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{this.state.data}</span><span class="pln"> </span><span class="atn">limit</span><span class="pun">=</span><span class="atv">{20}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">color</span><span class="pun">=</span><span class="atv">"#1c8cdc"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{this.state.data}</span><span class="pln"> </span><span class="atn">limit</span><span class="pun">=</span><span class="atv">{20}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#41c3f9"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">".25"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#41c3f9"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{this.state.data}</span><span class="pln"> </span><span class="atn">limit</span><span class="pun">=</span><span class="atv">{20}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#8e44af"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">"1"</span><span class="pln"> }}</span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{this.state.data}</span><span class="pln"> </span><span class="atn">limit</span><span class="pun">=</span><span class="atv">{10}</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">color</span><span class="pun">=</span><span class="atv">"#0a83d8"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Reference Line

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"max"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"min"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"mean"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"avg"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"median"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">'slategray'</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">".5"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Normal Band

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }}</span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesNormalBand</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }}</span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesNormalBand</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"mean"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>

Real world examples

<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">strokeWidth</span><span class="pln">: 3, </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#336aff"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData100}</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">{200}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#2991c8"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln">}} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesNormalBand</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#2991c8"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: .1 }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData100}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"black"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesSpots</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"orange"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesBars</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"white"</span><span class="pln">, </span><span class="atn">strokeWidth</span><span class="pln">: </span><span class="atv">"1"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#40c0f5"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">{80}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#8ed53f"</span><span class="pln">, </span><span class="atn">strokeWidth</span><span class="pln">: </span><span class="atv">"1"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">{80}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#d1192e"</span><span class="pln">, </span><span class="atn">strokeWidth</span><span class="pln">: </span><span class="atv">"1"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">{40}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"#559500"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#8fc638"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">"1"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="atv">"#272727"</span><span class="pln">}} </span><span class="atn">margin</span><span class="pun">=</span><span class="atv">{10}</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">{40}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"#d2673a"</span><span class="pln">, </span><span class="atn">fillOpacity</span><span class="pln">: </span><span class="atv">".5"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>
<span class="pln">
</span><span class="tag">&lt;Sparklines</span><span class="pln"> </span><span class="atn">data</span><span class="pun">=</span><span class="atv">{sampleData}</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="atv">"#00bdcc"</span><span class="pln">}} </span><span class="atn">margin</span><span class="pun">=</span><span class="atv">{10}</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">{40}</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesLine</span><span class="pln"> </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">"white"</span><span class="pln">, </span><span class="atn">fill</span><span class="pln">: </span><span class="atv">"none"</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;SparklinesReferenceLine</span><span class="pln">
        </span><span class="atn">style</span><span class="pun">={{</span><span class="pln"> </span><span class="atn">stroke</span><span class="pln">: </span><span class="atv">'white'</span><span class="pln">, </span><span class="atn">strokeOpacity</span><span class="pln">: .75, </span><span class="atn">strokeDasharray</span><span class="pln">: </span><span class="atv">'2, 2'</span><span class="pln"> }} </span><span class="tag">/&gt;</span><span class="pln">
</span><span class="tag">&lt;/Sparklines&gt;</span><span class="pln">
            </span>