Tremorx

Donut Chart

A donut chart displays quantitative information through a circular visualization.

Donut Open in playground 
<.donut_chart data={[%{"name" => "Noche Holding AG", "value" => 9800}, %{"name" => "Rain Drop AG", "value" => 4567}, %{"name" => "Push Rail AG", "value" => 3908}, %{"name" => "Flow Steal AG", "value" => 2400}, %{"name" => "Tiny Loop Inc.", "value" => 2174}]} id="donut-chart-single-donut" value="value" class="mx-auto" category="name" colors={["blue", "indigo", "teal", "amber", "rose"]} variant="donut" value_format="(,.0f">
</.donut_chart>
Pie Open in playground 
<.donut_chart data={[%{"name" => "Noche Holding AG", "value" => 9800}, %{"name" => "Rain Drop AG", "value" => 4567}, %{"name" => "Push Rail AG", "value" => 3908}, %{"name" => "Flow Steal AG", "value" => 2400}, %{"name" => "Tiny Loop Inc.", "value" => 2174}]} id="donut-chart-single-pie" value="value" class="mx-auto" category="name" colors={["blue"]} variant="pie" value_format="(,.0f">
</.donut_chart>
With label and animation Open in playground 
<.donut_chart data={[%{"name" => "Noche Holding AG", "value" => 9800}, %{"name" => "Rain Drop AG", "value" => 4567}, %{"name" => "Push Rail AG", "value" => 3908}, %{"name" => "Flow Steal AG", "value" => 2400}, %{"name" => "Tiny Loop Inc.", "value" => 2174}]} id="donut-chart-single-with-label-and-animation" value="value" class="mx-auto" category="name" colors={["blue"]} variant="donut" show_animation show_label value_format="(,.0f">
</.donut_chart>