{"id":13702246,"url":"https://github.com/Billy-Sheppard/chart-js-rs","last_synced_at":"2025-05-05T04:30:55.965Z","repository":{"id":51939965,"uuid":"496474091","full_name":"Billy-Sheppard/chart-js-rs","owner":"Billy-Sheppard","description":"Rust Chart.js connector crate","archived":false,"fork":false,"pushed_at":"2025-04-15T08:12:17.000Z","size":2156,"stargazers_count":26,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T08:16:25.654Z","etag":null,"topics":["chart","rust","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://billy-sheppard.github.io/chart-js-rs/examples/index.html","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Billy-Sheppard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-26T03:57:09.000Z","updated_at":"2025-04-15T08:12:21.000Z","dependencies_parsed_at":"2024-01-14T19:14:21.376Z","dependency_job_id":"def2cf65-b4ff-4291-bb89-2524bffdcfbd","html_url":"https://github.com/Billy-Sheppard/chart-js-rs","commit_stats":{"total_commits":49,"total_committers":3,"mean_commits":"16.333333333333332","dds":"0.22448979591836737","last_synced_commit":"0b7a0cf781b1c0ff96e023a467edcbfaf82ce4c1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Billy-Sheppard%2Fchart-js-rs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Billy-Sheppard%2Fchart-js-rs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Billy-Sheppard%2Fchart-js-rs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Billy-Sheppard%2Fchart-js-rs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Billy-Sheppard","download_url":"https://codeload.github.com/Billy-Sheppard/chart-js-rs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252439453,"owners_count":21748007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","rust","wasm","webassembly"],"created_at":"2024-08-02T21:00:32.778Z","updated_at":"2025-05-05T04:30:53.841Z","avatar_url":"https://github.com/Billy-Sheppard.png","language":"Rust","funding_links":[],"categories":["Integrations"],"sub_categories":["Others"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"https://raw.githubusercontent.com/Billy-Sheppard/chart-js-rs/main/examples/favicon.png\" alt=\"Material Bread logo\"\u003e\n\u003c/p\u003e\n\n# Chart.js types API in Rust \n[![crates.io](https://img.shields.io/crates/v/chart-js-rs.svg)](https://crates.io/crates/chart-js-rs)\n[![docs.rs](https://docs.rs/chart-js-rs/badge.svg)](https://docs.rs/chart-js-rs)\n\n***In Alpha, types added as needed, feel free to PR.***\n\n## How to use\n\nCheck 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.\n\nThe compiled webpage can be found here: https://billy-sheppard.github.io/chart-js-rs/examples/index.html\n\n### Cargo.toml: \n```toml\n[dependencies.chart-js-rs]\ngit = \"https://github.com/Billy-Sheppard/chart-js-rs\"\n```\n\n### Rust:\n```rust\n    use chart_js_rs::ChartExt;\n\n    let id = \"[YOUR CHART ID HERE]\";\n    let chart = chart_js_rs::scatter::Scatter {\n        id: id.to_string(),\n        options: ChartOptions { .. },\n        data: Dataset { .. },\n        ..Default::default()\n    };\n    // to use any JS callbacks or functions you use render_mutate and refer to the JS below\n    chart.into_chart().mutate().render();\n\n    // to use any chart-js plugins, a few examples\n    chart.into_chart().plugins(\"[window['chartjs-plugin-autocolors']]\").render(); // for autocolors and no mutating\n    chart.into_chart().mutate().plugins(\"[window['chartjs-plugin-autocolors']]\").render(); // for autocolors and mutating\n    chart.into_chart().mutate().plugins(\"[ChartDataLabels, window['chartjs-plugin-autocolors']]\").render(); // for datalabels, autocolors, and mutating\n\n    // else use render\n    chart.into_chart().render();\n```\n\n### Your html file:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chart.js@^4\"\u003e\u003c/script\u003e\n\n...\n\n\u003cscript type=\"module\"\u003e\n    import init from 'wasm.js';\n\n    async function run() {\n      await init();\n    }\n\n    run();\n\u003c/script\u003e\n\n...\n\n\u003cscript type=\"module\"\u003e\n  import * as root from './chart_js_rs_example.js'\n\n  window.callbacks = root;\n  window.mutate_chart_object = function (v) {\n    if (v.id === (\"[YOUR CHART ID HERE]\")) {\n      v.options.scales.y1.ticks = {\n        callback:\n          function (value, _index, _values) {\n            return '$' + value.toFixed(2);\n          }\n      };\n    }\n\n    return v\n  };\n\u003c/script\u003e\n```\n\n\u003chr\u003e\n\n# Explainers\n\n## Whats the difference between `my_chart.render()` and `mychart.mutate().render()`?\n`.render()` is for simple charts, that don't require any further changes done using javascript code.\n\n`.mutate().render()` 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.\n\n`.plugins(\"[MyPlugin]\").mutate().render()` allows for ChartJS plugins to be used with your charts, the parameter is the direct string representation of the Javascript array containing your plugins. [Docs](https://www.chartjs.org/docs/latest/developers/plugins.html)\n\n`.plugins(\"[MyPlugin]\").defaults(\"Chart.defaults.font.size = 20;\").mutate().render()` allows for ChartJS defaults to be set.\n\n## How to use `struct FnWithArgs`?\n`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.\n\nIt 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/).\n\n`FnWithArgs` is used, for example, in implementing conditional line segment colouring, according to the [docs](https://www.chartjs.org/docs/latest/samples/line/segments.html). \nIt can also be used to leaverage logic written in Rust, to calculate outputs for ChartJS.\n```rust\n  #[wasm_bindgen] // your function must be a wasm_bindgen export\n  pub fn add(a: u32, b: u32) -\u003e u32 {\n      a + b\n  }\n\n  // ...\n\n  Scatter::\u003c/*...*/\u003e {\n    data: {\n      datasets: vec![\n        Dataset {\n          // ...\n          segment: Segment {\n            borderColor: \n              // todo!() \n              // write some examples here!\n          }\n        }\n      ]\n    }\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBilly-Sheppard%2Fchart-js-rs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBilly-Sheppard%2Fchart-js-rs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBilly-Sheppard%2Fchart-js-rs/lists"}