Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/graphieros/tiny-spark. An elegant, reactive and responsive sparkline chart solution without dependency. tiny-spark.graphieros.com
chart sparkline universal
Something went wrong. Try again.
2.2 kB · 90 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import './style.css'// @ts-ignoreimport { render } from '../src/index';
setTimeout(render);
let plotRadius = 3;
setTimeout(() => { plotRadius = 5; document.querySelector('[data-id="test"]')?.setAttribute('data-plot-radius', plotRadius + '')}, 2000)
// setTimeout(render, 4000)
function makeDs(n: number) { let arr = []; for(let i = 0; i < n; i += 1) { if (i > 10 && i < 20) { arr.push(null) } else { arr.push(i % 2 === 0 ? Math.random() * 10 : Math.random() * -10); } } return arr.toString();}
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `<div style="width:100%"><div class="tiny-spark" data-type="line" data-curve="true" data-cut-null="true" data-animation="true" data-gradient-from="#CCCCCC" data-gradient-to="#CCCCCC00" data-gradient-from-opacity="1" data-gradient-to-opacity="1" data-line-color="#4A4A4A" data-area-color="#1A1A1A10" data-line-thickness="2" data-hide-plots-above="100" data-responsive data-plot-color="#2A2A2A" data-plot-radius="${plotRadius}" data-number-locale="en-US" data-number-rounding="2" data-indicator-color="#1A1A1A" data-indicator-width="1" data-set="[${makeDs(100)}]" data-dates='["jan", "feb", "mar", "apr", "may", "jun"]' data-show-last-value="true" data-last-value-font-size="12" data-last-value-color="red" data-tooltip-smoothing="1" data-temperature-colors="['#00FF00', '#FF0000']"></div></div><div style="width:100%"><div class="tiny-spark" data-gradient-from="#FF0000" data-gradient-to="#FFAA00" data-gradient-from-opacity="1" data-gradient-to-opacity="1" data-type="bar" data-curve="true" data-animation="true" data-line-color="#4A4A4A" data-area-color="#1A1A1A10" data-line-thickness="3" data-hide-plots-above="100" data-responsive data-plot-color="#2A2A2A" data-plot-radius="${plotRadius}" data-number-locale="en-US" data-number-rounding="2" data-indicator-color="#1A1A1A" data-indicator-width="1" data-set="[${makeDs(100)}]" data-dates='["jan", "feb", "mar", "apr", "may", "jun"]' data-show-last-value="true" data-last-value-font-size="12" data-last-value-color="red" data-tooltip-smoothing="0.5"></div></div>`import './index'