An elegant, reactive and responsive sparkline chart solution without dependency.
npm i tiny-spark
Import the file in your project:
import { render } from "tiny-spark";
// If you need to fetch data, call render afterwards
getData().then(render);
// If you hardcode your dataset, you can call render immediatelyCalling render again will re-trigger the animation (if data-animation is set to "true").
Just set up a div with a "tiny-spark" class, with a few data attributes to configure the chart. Note that providing data-id is optional, a unique id will be generated if you don't.
Render a line chart:
<div style="width: 100%">
<div
class="tiny-spark"
data-id="myId"
data-type="line"
data-curve="true"
data-cut-null="false"
data-set="[1, 2, 3, 5, 8, 13]"
data-dates='["01-2026", "02-2026", "03-2026", "04-2026", "05-2026", "06-2026"]'
data-responsive
data-animation="true"
data-line-color="#4A4A4A"
data-area-color="#1A1A1A10"
data-gradient-from="#FF0000"
data-gradient-to="#FFAA00"
data-temperature-colors="['#00FF00', '#FF0000']"
data-gradient-from-opacity="1"
data-gradient-to-opacity="1"
data-line-thickness="4"
data-plot-color="#2A2A2A"
data-plot-radius="2"
data-hide-plots-above="100"
data-number-locale="en-US"
data-number-rounding="2"
data-indicator-color="#1A1A1A"
data-indicator-width="1"
data-show-last-value="true"
data-last-value-font-size="12"
data-last-value-color="#1A1A1A"
data-tooltip-smoothing="1"
></div>
</div>Render a bar chart:
<div style="width: 100%">
<div
class="tiny-spark"
data-id="myId"
data-type="bar"
data-set="[1, 2, 3, 5, 8, 13]"
data-dates='["01-2026", "02-2026", "03-2026", "04-2026", "05-2026", "06-2026"]'
data-responsive
data-animation="true"
data-line-thickness="4"
data-gradient-from="#FF0000"
data-gradient-to="#FFAA00"
data-gradient-from-opacity="1"
data-gradient-to-opacity="1"
data-plot-color="#2A2A2A"
data-number-locale="en-US"
data-number-rounding="2"
data-indicator-width="0"
data-show-last-value="true"
data-last-value-font-size="12"
data-last-value-color="#1A1A1A"
data-tooltip-smoothing="1"
></div>
</div>tiny-spark is headless.
Target the following css classes to customize elements:
/** the chart container (div element) */
.tiny-spark {
}
/** the tooltip (div element) */
.tiny-spark-tooltip {
/** just display:none if you don't need it */
}
/** the indicator (svg line element) */
.tiny-spark-indicator {
/** for example: customize stroke-dasharray */
}
/** the plots (svg circle element) */
.tiny-spark-datapoint-circle {
}
/** the chart line (svg path element) */
.tiny-spark-line-path {
}
/** the chart area (svg path element) */
.tiny-spark-line-area {
}