Barò Cosmetics - Sunburst
This package is used to show data within a sunburst chart. It is inspired by the sunburst project by Kerry Roden made in d3.js. This project's source code is currently under the Apache 2.0 license.
Install Barò Cosmetics - Sunburst
NPM
Run the following command in your project:
npm install @barocosmetics/sunburst
Now add this line in your bundle js:
import "@barocosmetics/sunburst"
Initialize Sunburst
Create a <div> element with id barocosmetics-sunburst.
<div id="barocosmetics-sunburst">
</div>
Now, set the attribute data-url with the address containing the data source.
Warning: this step is mandatory. Warning: data format must be JSON Warning: data format must be compatible with the original sunburst project.
<div id="barocosmetics-sunburst" data-url="https://my-source.data/route">
</div>
The graph will appear on page loaded.
Change Color
Use the data-color attribute for change the graph color.
The available colors are those of tailwindcss.
Warning: insert only the color name as attribute value!
<div id="barocosmetics-sunburst" data-url="https://my-source.data/route" data-color="pink">
</div>
Change Title
You can set a title for the graph.
It will appear once you move the mouse over the graph.
Use the data-title attribute for chage the graph title.
<div id="barocosmetics-sunburst" data-url="https://my-source.data/route" data-title="My Graph">
</div>