Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Billy-Sheppard/chart-js-rs
Rust Chart.js connector crate
https://github.com/Billy-Sheppard/chart-js-rs
chart rust wasm webassembly
Last synced: 3 months ago
JSON representation
Rust Chart.js connector crate
- Host: GitHub
- URL: https://github.com/Billy-Sheppard/chart-js-rs
- Owner: Billy-Sheppard
- License: apache-2.0
- Created: 2022-05-26T03:57:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T03:11:53.000Z (4 months ago)
- Last Synced: 2024-02-12T23:05:04.069Z (4 months ago)
- Topics: chart, rust, wasm, webassembly
- Language: Rust
- Homepage: https://billy-sheppard.github.io/chart-js-rs/examples/index.html
- Size: 698 KB
- Stars: 17
- Watchers: 1
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome - chart-js-rs
README
# Chart.js types API in Rust
[](https://crates.io/crates/chart-js-rs)
[](https://docs.rs/chart-js-rs)
***In Alpha, types added as needed, feel free to PR.***
## How to use
Check out the example folder for some code examples. The example uses WebAssembly and the [dominator](https://github.com/Pauan/rust-dominator) crate to produce charts. This library should be compatible with any WASM/HTML library.
The compiled webpage can be found here: https://billy-sheppard.github.io/chart-js-rs/examples/index.html
### Cargo.toml:
```toml
[dependencies.chart-js-rs]
git = "https://github.com/Billy-Sheppard/chart-js-rs"
```
### Rust:
```rust
let id = "[YOUR CHART ID HERE]";
let chart = chart_js_rs::scatter::Scatter {
id: id.to_string(),
options: ChartOptions { .. },
data: Dataset { .. },
..Default::default()
};
// to use any callbacks or functions you use render_mutate and refer to the JS below
chart.to_chart().render_mutate();
// else use render
chart.to_chart().render();
```
### Your html file:
```html
...
import init from 'wasm.js';
async function run() {
await init();
}
run();
...
// mutating charts
function mutate_chart_object(v) { // must have this function name
if (v.id === ("[YOUR CHART ID HERE]")) {
// do any work here, this would prepend `$` to y1 axis tick labels
v.options.scales.y1.ticks = {
callback:
function (value, _index, _values) {
return '$' + value.toFixed(2);
}
};
};
return v
}
```
# Explainers
## Whats the difference between `my_chart.render()` and `mychart.render_mutate()`?
`.render()` is for simple charts, that don't require any further changes done using javascript code.
`.render_mutate()` allows for chart objects to be accessible in your javascript file, so you can mutate the object however required, especially useful for ChartJS functions not yet available in this library.
## How to use `struct FnWithArgs`?
`FnWithArgs` is a helper struct to allow serialization of javascript functions by encoding their body and arguments as a string. Then, as needed, the function can be rebuilt in JavaScipt, and called.
It is important then, that you know which variables are being parsed to the function. For this information, you can refer to the [Chart.js documentation](https://www.chartjs.org/docs/latest/).
`FnWithArgs` is used, for example, in implimenting conditional line segment colouring, according to the [docs](https://www.chartjs.org/docs/latest/samples/line/segments.html).
```rust
Scatter::*...*/> {
data: {
datasets: vec![
Dataset {
// ...
segment: Segment {
borderColor:
FnWithArgs::new() // Create the Function
.arg("ctx") // Add a named argument using a builder pattern
.body("ctx.p0.parsed.y > ctx.p1.parsed.y ? 'red' : 'green'") // Add the function body, in this case make the line red if the slope is negative
}
}
]
}
}
```