Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/himynameisdave/svelte-frappe-charts
📈 Svelte bindings for frappe-charts.
https://github.com/himynameisdave/svelte-frappe-charts
charting-library charts frappe-charts svelte svelte-component svg-charts
Last synced: 6 days ago
JSON representation
📈 Svelte bindings for frappe-charts.
- Host: GitHub
- URL: https://github.com/himynameisdave/svelte-frappe-charts
- Owner: himynameisdave
- License: mit
- Created: 2019-11-28T17:05:24.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T22:50:12.000Z (6 months ago)
- Last Synced: 2024-11-22T01:11:41.394Z (20 days ago)
- Topics: charting-library, charts, frappe-charts, svelte, svelte-component, svg-charts
- Language: Svelte
- Homepage: https://frappe.io/charts
- Size: 1.14 MB
- Stars: 309
- Watchers: 8
- Forks: 16
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-frappe-charts - Svelte bindings for frappe-charts. (UI Components / Charts)
README
---
Makes it easy to use [frappe-charts](https://frappe.io/charts) in your [Svelte](https://svelte.dev/) project.
### Installation
```
yarn add svelte svelte-frappe-charts
npm i -S svelte svelte-frappe-charts
```
> **Note**: Assumes you are using `>= [email protected]`.
### Usage
Use the chart in your Svelte project with ease:
```svelte
import Chart from 'svelte-frappe-charts';
let data = {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
datasets: [
{
values: [10, 12, 3, 9, 8, 15, 9]
}
]
};
```
The component API directly matches the [the configuration of `frappe-charts`](https://frappe.io/charts/docs/reference/configuration).
### Updating data
There are two ways to update data in a chart: either in adding and removing individual points, or updating the existing data with an entirely new set of data points.
#### Updating individual data points
##### addDataPoint
Add a data point to the chart, increasing the length of the dataset.
```svelte
import Chart from 'svelte-frappe-charts';
let data = {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
datasets: [
{
values: [10, 12, 3, 9, 8, 15, 9]
}
]
};
let chartRef;
function addDataPoint() {
chartRef.addDataPoint('Wed', [30], 1);
}
Add data point
```
[More info on `addDataPoint`](https://frappe.io/charts/docs/reference/api#adddatapoint).
##### removeDataPoint
Remove a data point from the chart, reducing the length of the dataset.
```svelte
import Chart from 'svelte-frappe-charts';
let data = {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
datasets: [
{
values: [10, 12, 3, 9, 8, 15, 9]
}
]
};
let chartRef;
function removeDataPoint() {
chartRef.removeDataPoint(3); // Index of the item to remove
}
Remove data point
```
[More info on `removeDataPoint`](https://frappe.io/charts/docs/reference/api#removedatapoint).
#### Updating full data
Update the entire data, including annotations, by passing the entire new data object to update.
```svelte
import Chart from 'svelte-frappe-charts';
let data = {
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
datasets: [
{
values: [10, 12, 3, 9, 8, 15, 9]
}
]
};
let chartRef;
function updateData() {
data = {
labels: ['Friday', 'Saturday', 'Sunday'],
datasets: [
{
values: [300, 380, 275]
}
]
};
}
Update Chart
```
### Chart navigation
[Chart navigation](https://frappe.io/charts/docs/update_state/navigation) can be used when the `isNavigable` prop is set on the `Chart` component.
Once it is set, the `data-select` event is propagated and can be handled in Svelte's standard ways (see the Events section of the tutorial and examples, and [the API docs](https://svelte.dev/docs#on_component_event)).
```svelte
import Chart from "svelte-frappe-charts";
let data = {
labels: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon" ],
datasets: [
{ values: [ 300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710 ] },
],
};
const onDataSelect = (event) => {
console.log("Data select event fired!", event);
selected = event;
};
let selected;
Svelte Frappe charts navigation demo
```
### Exporting charts
You can easily export a chart ([see Exporting](https://frappe.io/charts/docs/exporting/images)) as an SVG by storing a reference to the `` component, and then calling `exportChart` on it:
```svelte
// ...
let chartRef;
const onExport = () => chartRef.exportChart();
Export
```
### Contributing
[Issues](https://github.com/himynameisdave/svelte-frappe-charts/issues/new) and pull requests are greatly welcome!
---
_✌️Created by [Dave](http://himynameisdave.com). Licenced under MIT._
