Appearance
Charts > Rose Segment Chart
A Rose Segment Chart is a polar coordinate visualization that displays data in radial segments, resembling a rose flower, where each segment represents a category or data subset.
The Chart
Download example CSV
Copy HTML
Playground
Data
Number of segments
Animation
Total time of animation in ms
Style
Color of shape
Show segment names
Rounding of corners of shapes
Space between shapes
Show labels outside of chart
Thickness of lines
Show main line on shapes
Component API
The rose segment chart is built using SVG and d3.
Data
js
[
{
id: "Val 1",
name: "Val 1",
value: 96.7,
color: "#bbb",
max: 96.5,
min: 70.2,
},
];Props
| Name | Default | Type | Description |
|---|---|---|---|
data | [] | Array | The dataset |
showLabels | true | Boolean | Whether or not to show category names |
externalLabels | false | Boolean | Whether or not to show the labels outside of the chart |
duration | 500 | Number | The total time of the animation in ms |
minAngle | 0.3 | Number | The minimum angle needed to display a label |
cornerRadius | 3 | Number | The rounding of the corners of each segment |
padAngle | 0.1 | Number | The space between shapes |
padRadius | 0.25 | Number | The space between shapes |
strokeWidth | 4 | Number | The width of the lines |
format | (d) => d.toFixed(0) + '%' | Function | The format function for value labels |
showMainLine | true | Boolean | Whether or not to show lines on shapes |
max | null | Number | The maximum value of data (computed if not provided) |
textColor | #6b7280 | String | The color for the labels |
hoverColor | #f9fafb | String | The color of the background of hovered segment |
selected | null | String | Number | The id of the selected segment |
Events
| Event | Argument | Description |
|---|---|---|
@select | { target, data } | Emitted when segment is clicked |
@hover | { target, data } | Emitted when segment is hovered |
Dependencies
- d3