Bar Chart

Bar charts compare numerical values and use the length of each bar to represent the value of each variable.

<.bar_chart data={[%{"Number of threatened species" => 2488, "name" => "Amphibians"}, %{"Number of threatened species" => 1445, "name" => "Birds"}, %{"Number of threatened species" => 743, "name" => "Crustaceans"}, %{"Number of threatened species" => 281, "name" => "Ferns"}, %{"Number of threatened species" => 251, "name" => "Arachnids"}, %{"Number of threatened species" => 232, "name" => "Corals"}, %{"Number of threatened species" => 98, "name" => "Algae"}]} id="bar-chart-single-default" index="name" class="mx-auto" colors={["blue"]} categories={["Number of threatened species"]} x_axis_format="%b %Y" y_axis_format="(,.0f">
</.bar_chart>
<.bar_chart data={[%{"Group A" => 890, "Group B" => 338, "Group C" => 538, "Group D" => 396, "Group E" => 138, "Group F" => 436, "name" => "Topic 1"}, %{"Group A" => 289, "Group B" => 233, "Group C" => 253, "Group D" => 333, "Group E" => 133, "Group F" => 533, "name" => "Topic 2"}, %{"Group A" => 380, "Group B" => 535, "Group C" => 352, "Group D" => 718, "Group E" => 539, "Group F" => 234, "name" => "Topic 3"}, %{"Group A" => 90, "Group B" => 98, "Group C" => 28, "Group D" => 33, "Group E" => 61, "Group F" => 53, "name" => "Topic 4"}]} id="bar-chart-single-with-labels" index="name" class="mx-auto" colors={["blue", "teal", "amber", "rose", "indigo", "emerald"]} categories={["Group A", "Group B", "Group C", "Group D", "Group E", "Group F"]} y_axis_label="Total Score" x_axis_label="Topic" x_axis_format="%b %Y" y_axis_format="(,.0f">
</.bar_chart>