{"repo":"metonym/svelte-bar-chart-race","free":true,"listed":false,"github":"https://github.com/metonym/svelte-bar-chart-race","clone":"git clone https://github.com/metonym/svelte-bar-chart-race.git","description":"Bar chart race visualization for Svelte","language":"TypeScript","stars":33,"topics":["svelte","svelte-component","bar-chart-race","sveltekit","typescript"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"svelte-bar-chart-race [![NPM][npm]][npm-url] Featured in Svelte Design Patterns (2022) A bar chart race is a horizontal bar chart that animates bars over an interval (usually time). The x-axis represents the bar chart values. The bars are sorted based on their value from highest to lowest as the interval changes. This library exports the following components: - BarChartRace : Parent component that accepts data, options and manages internal state - Chart : Child component that displays the chart with the ability to customize the chart display and animation - Slider : Child component that shows the range input to control the interval (current value) Demo · Svelte REPL Installation Usage The examples use data sampled from StackOverflow's annual developer survey for \"Most Loved Languages.\" Sample data Simple In the simplest example, all you need is to pass data to BarChartRace . Then, pass Chart and Slider through its default slot. Source : demo/Simple.svelte Two-way Binding The currentValue prop supports two-way binding. In this example, the initial value is 2018 . Any change to the currentValue via Slider will be reflected to the bound value. currentValue can also be programmatically updated. Finally, setting currentValue to null resets the value to the lowest value (in this case, 2017 ). Source : demo/TwoWayBinding.svelte Kitchen Sink The kitchen sink showcases all available features. An alternative to accessing the currentValue is to destructure it from the BarChartRace slot ","default_branch":null,"files":null,"tree":[],"storefront":"/r/metonym","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/metonym/svelte-bar-chart-race/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}