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>