Appearance

On this page

Charts > Rose Chart ​

A rose chart is a circular statistical graphic that displays data in terms of the length of sectors, with each sector representing a category and the radial length indicating the magnitude of the data.

The Chart ​

Total Value:

Other compatible charts

Download example CSV
Copy HTML

Playground ​

Data

Number of categories

Animation

Total time of animation in ms

Style

Color for each category
Width of border between segments
Rounding of corners
Space in center
Show category labels

Usage Example (with tooltip) ​

vue
<template>
  <RoseChart :data="data" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div class="">
      <p class=" my-0">
        <span class="font-semibold">Total Value: </span
        >{{ tooltip?.data?.data?.value }}
      </p>
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The rose chart is built using SVG and d3.

Data ​

js
[
  {
    id: "data-1",
    name: "Data 1",
    values: {
      val1: { id: "val1", name: "val 1", value: 60, color: "#F28E2B" },
      val2: { id: "val2", name: "val 2", value: 40, color: "#4E79A7" },
    },
  },
  {
    // ...
  },
];

Props ​

NameDefaultTypeDescription
data[]ArrayThe dataset
showLabelstrueBooleanWhether or not to show category names
labelsOutsidetrueBooleanWhether or not to show the labels outside of the shapes
duration500NumberThe total time of the animation in ms
cornerRadius0NumberThe rounding of the corners of each segment
innerRadius0NumberThe size of the space in the center
strokeWidth4NumberThe space between shapes
format(d) => d.toFixed(0) + '%'FunctionThe format function for value labels

Dependencies ​

  • d3