@redsift/d3-rs-radial-chart
Advanced tools
ui-rs-radial-chart is a component for creating a customizable radial chart for your application, e.g. to show data over time like monthly expenses on taxis over a year. It is provided as a custom element for easy integration into your projects.
If your browser does NOT support custom elements natively (see caniuse) you have to install the web components shim and include it in your project before including this component!
The component is part of the RedsiftUI library. For a documentation of the hero unit see the official RedsiftUI documentation.
A UMD build is available from //static.redsift.io/reusable/ui-rs-radial-chart/latest/ui-rs-radial-chart.umd-es2015.min.js.
To build locally checkout this repository and
> cd ui-rs-radial-chart
> npm install
> npm run build
This will create a ./dist folder with the Javascript and CSS files.
First include the CSS file in the <head> of your page:
<link rel="stylesheet" href="//static.redsift.io/reusable/ui-rs-radial-chart/latest/css/ui-rs-radial-chart.min.css">
Additionally include the Javascript on the bottom of the <body>:
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//static.redsift.io/reusable/ui-rs-radial-chart/latest/js/ui-rs-radial-chart.umd-es2015.min.js"></script>
Including the Javascript already registers the custom element rs-radial-chart with the browser. Make sure to include D3 before the component, as it depends on it!
Use the following HTML code to create a rs-radial-chart element:
<rs-radial-chart></rs-radial-chart>
You can optionally provide a DIV with the ID chart like so:
<rs-radial-chart>
<div id="chart"></div>
</rs-radial-chart>
If provided the chart will render into this DIV, giving you more control over e.g. styling. If not provided a DIV is created automatically by the element.
Data is added to the chart via Javascript in the following form:
var chart = document.querySelector('rs-radial-chart');
var data = [{
name: "Jan",
value: 3.6732592034888905,
color: () => { return '#00ff00'; }
}, {
name: "Feb",
value: 3.3835721480313685,
color: () => { return '#00ff00'; },
classed: "stripe"
}, {
name: "Mar",
value: 46.90614320865888,
color: () => { return '#00ff11'; }
}, {
name: "Apr",
value: 16.262593631395912,
color: () => { return '#00ff22'; }
}, {
name: "May",
value: 53.40171839979518,
color: () => { return '#00ff33'; }
}, {
name: "Jun",
value: 15.899117927917139,
color: () => { return '#00ff44'; }
}, {
name: "Jul",
value: 6.650584346480011,
color: () => { return '#00ff55'; }
}, {
name: "Aug",
value: 26.689381547140503,
color: () => { return '#00ff66'; }
}, {
name: "Sep",
value: 34.29461737322482,
color: () => { return '#00ff77'; }
}, {
name: "Oct",
value: 26.4320733402228,
color: () => { return '#00ff88'; }
}, {
name: "Nov",
value: 51.88087153647562,
color: () => { return '#00ff99'; }
}, {
name: "Dec",
value: 54.6380052855129,
color: () => { return '#00ffaa'; }
}];
chart.data = data;
If your browser does not support custom elements (and only then!) make sure to wrap the above code into the following code:
window.addEventListener('WebComponentsReady', function(e) {
// setup code ...
});
See a description of why this is necessary here.
For development run
> npm run serve
within the repository folder. It will start a web server serving the content of ./samples and supports live-reloading when a source file is changed.
FAQs
A customizable radial chart.
We found that @redsift/d3-rs-radial-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
/Research
/Security News
Socket.dev found compromised various CrowdStrike npm packages, continuing the "Shai-Halud" supply-chain attack that previously hit `tinycolor`.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers
Security News
pnpm's new minimumReleaseAge setting delays package updates to prevent supply chain attacks, with other tools like Taze and NCU following suit.