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
Light 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!()Dark theme
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(22, 197, 245)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(22, 197, 245, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()Teal theme
Light 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!()Dark theme
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(23, 227, 209)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(23, 227, 209, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()Indigo theme
Light 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!()Dark theme
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(102, 89, 255)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(102, 89, 255, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()Black & white theme
Light 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!()Dark theme
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(240, 240, 240)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(240, 240, 240, 0.9)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(40, 40, 40, 0.9)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(40, 40, 40, 0.8)", stroke_width: 0.4, fill_color: "rgba(40, 40, 40, 0.3)")
|> SparklineSvg.to_svg!()Simple amber theme
Light 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!()Dark theme
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(255, 165, 22, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(255, 165, 22, 0.4)")
|> SparklineSvg.to_svg!()Simple green theme
Light 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!()Dark theme
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(40, 255, 118, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(40, 255, 118, 0.4)")
|> SparklineSvg.to_svg!()Simple sky theme
Light 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!()Dark theme
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(18, 181, 255, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(18, 181, 255, 0.4)")
|> SparklineSvg.to_svg!()Simple purple theme
Light 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!()Dark theme
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(173, 98, 255, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(173, 98, 255, 0.4)")
|> SparklineSvg.to_svg!()Simple rose theme
Light 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!()Dark theme
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(255, 83, 112, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(255, 83, 112, 0.4)")
|> SparklineSvg.to_svg!()