Tremorx

Line Chart

A line chart is a graphical representation that connects one or more series of data points with a continuous line.

Read more Read less

Custom tooltips are unsupported for now.

Default Open in playground 
<.line_chart data={[%{"Inverters" => 2338, "SolarPanels" => 2890, "date" => "Jan 2022"}, %{"Inverters" => 2103, "SolarPanels" => 2756, "date" => "Feb 2022"}, %{"Inverters" => 2194, "SolarPanels" => 3322, "date" => "Mar 2022"}, %{"Inverters" => 2108, "SolarPanels" => 3470, "date" => "Apr 2022"}, %{"Inverters" => 1812, "SolarPanels" => 3475, "date" => "May 2022"}, %{"Inverters" => 1726, "SolarPanels" => 3129, "date" => "Jun 2022"}, %{"Inverters" => 1982, "SolarPanels" => 3490, "date" => "Jul 2022"}, %{"Inverters" => 2012, "SolarPanels" => 2903, "date" => "Aug 2022"}, %{"Inverters" => 2342, "SolarPanels" => 2643, "date" => "Sep 2022"}, %{"Inverters" => 2473, "SolarPanels" => 2837, "date" => "Oct 2022"}, %{"Inverters" => 3848, "SolarPanels" => 2954, "date" => "Nov 2022"}, %{"Inverters" => 3736, "SolarPanels" => 3239, "date" => "Dec 2022"}]} id="line-chart-single-default" index="date" class="mx-auto" colors={["indigo", "rose"]} categories={["SolarPanels", "Inverters"]} y_axis_format="(,.0f" x_axis_format="%b %Y">
</.line_chart>
With labels Open in playground 
<.line_chart data={[%{"Inverters" => 2338, "SolarPanels" => 2890, "date" => "Jan 2022"}, %{"Inverters" => 2103, "SolarPanels" => 2756, "date" => "Feb 2022"}, %{"Inverters" => 2194, "SolarPanels" => 3322, "date" => "Mar 2022"}, %{"Inverters" => 2108, "SolarPanels" => 3470, "date" => "Apr 2022"}, %{"Inverters" => 1812, "SolarPanels" => 3475, "date" => "May 2022"}, %{"Inverters" => 1726, "SolarPanels" => 3129, "date" => "Jun 2022"}, %{"Inverters" => 1982, "SolarPanels" => 3490, "date" => "Jul 2022"}, %{"Inverters" => 2012, "SolarPanels" => 2903, "date" => "Aug 2022"}, %{"Inverters" => 2342, "SolarPanels" => 2643, "date" => "Sep 2022"}, %{"Inverters" => 2473, "SolarPanels" => 2837, "date" => "Oct 2022"}, %{"Inverters" => 3848, "SolarPanels" => 2954, "date" => "Nov 2022"}, %{"Inverters" => 3736, "SolarPanels" => 3239, "date" => "Dec 2022"}]} id="line-chart-single-with-labels" index="date" class="mx-auto" colors={["indigo", "cyan"]} categories={["SolarPanels", "Inverters"]} y_axis_label="Revenue (KES)" x_axis_label="Month of Year" y_axis_format="(,.0f" x_axis_format="%b %Y">
</.line_chart>