View Source Examples

These examples are meant to be used directly in your code. You can copy and paste them in your project and they will work out of the box. The colors had been chosen following the tailwind color palette. Each example is shown in light and dark mode.

All these examples are set with these 3 variables:

# Data source
data = [4, 4, 6, 3, 2, 1, 3, 5, 7, 7, 7, 6, 9, 11, 11, 5, 7, 6, 9, 19, 19, 20, 21, 20, 17, 20, 19, 17]

# Arbitrary marker and marker area
marker = 25
marker_area = {10, 15}

Cyan theme 

data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(6, 182, 212, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(6, 182, 212, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()

Teal theme 

data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(13, 148, 136, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(13, 148, 136, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()

Indigo theme 

data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(67, 56, 202, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(67, 56, 202, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()

Black & white theme 

data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(0, 0, 0)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(0, 0, 0, 0.9)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgb(243, 244, 246", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(243, 244, 246, 0.8)", stroke_width: 0.4, fill_color: "rgba(243, 244, 246, 0.1)")
|> SparklineSvg.to_svg!()

Simple amber theme 

data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(245, 158, 11, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(245, 158, 11, 0.2)")
|> SparklineSvg.to_svg!()

Simple green theme 

data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(34, 197, 94, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(34, 197, 94, 0.2)")
|> SparklineSvg.to_svg!()

Simple sky theme 

data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(14, 165, 233, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(14, 165, 233, 0.2)")
|> SparklineSvg.to_svg!()

Simple purple theme 

data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(168, 85, 247, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(168, 85, 247, 0.2)")
|> SparklineSvg.to_svg!()

Simple rose theme 

data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(244, 63, 94, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(244, 63, 94, 0.2)")
|> SparklineSvg.to_svg!()