Appearance
Semicircle chart
A chart that visually represents data as proportional segments of a half-circle, ideal for comparing values within a limited range.
Featured on:
FindThe Chart
Rank:
Download example CSV
Copy HTML
Playground
Data
Number of indicators
Number of categories
Style
Colors for areas
Color of border between areas
Stroke width of line between areas
Component API
The semicircle chart, built using SVG and D3, highlights a selected category (chosen at random), with its values emphasized. Hovering over other categories reveals their positions across each indicator.
Usage Example (with tooltip)
vue
<template>
<SemiCircleChart
v-if="data?.length"
:selected-item="selectedCategory"
@hover="setTooltip"
:data="data"
/>
<OTTooltip :info="tooltip">
<div class="">
<p class=" my-0">
<span class="font-semibold">Rank: </span>{{ tooltip?.data?.rank }}
</p>
</div>
</OTTooltip>
</template>
<script setup>
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
const selectedCategory = ref({});
</script>Data
js
[
{
id: "data-1",
name: "Data 1",
values: {
val1: {
id: "val1",
name: "val 1",
value: 100,
},
val2: {
id: "val2",
name: "val 2",
value: 47.22838137,
},
val3: {
id: "val3",
name: "val 3",
value: 47.00665188,
},
val4: {
id: "val4",
name: "val 4",
value: 9.090909091,
},
},
},
...
]Props
| Name | Default | Type | Description |
|---|---|---|---|
data | Array of indicators and categories with values | Array | The dataset |
cornerRadius | 3 | Number | Radius of the corners for chart arcs |
padAngle | 0.01 | Number | Padding angle between arcs |
innerRadiusCircles | 6 | Number | Inner radius of the semi-circle chart |
minAngle | 0.3 | Number | Minimum angle for the arcs |
duration | 500 | Number | Transition duration in milliseconds |
bgColor | null | String | Background color for the chart |
title | "" | String | Title of the chart |
id | "" | String | Unique ID for the chart |
indicators | Object mapping indicator names to IDs | Object | Indicator mapping object |
format | (d) => d.toFixed(1) + "%" | Function | Formatting function for display values |
selectedItem | { id: "category_1", name: "Category 1", longName: "Category 1" } | Object | Selected category details |
innerRadius | 0.67 | Number | Inner radius as a proportion of outer radius |
showAxes | true | Boolean | Displays axes in the chart |
hasHighlight | true | Boolean | Highlights selected category |
indexRanking | 1 | Number | Ranking index to display |
colors | scaleColors | Array | Array of colors for chart elements |
highlightColor | "#491E5D" | String | Color used for highlighting |
highlightWidth | 1 | Number | Width of the highlight border |
Events
| Event | Argument | Description |
|---|---|---|
@hover | { target, data } | Emitted when an arc section is hovered |
Dependencies
- d3