ContEx LinePlot showing bouncing line unexpectedly

Hi community,

I am trying to plot a line graph with Elixir’s ContEx charting system. I’m assigning the dataset with, before assigning the chart with and rendering the SVG with The data I’m passing into is formatted as {x_value, y_value}.

	{1, 10.1},
	{2, 10.1},
	{3, 8.5},
	{4, 6.0},
	{5, 0.0},
	{6, 0.0},
	{7, 0.0},
	{8, 0.0},
	{9, 0.0},
	{10, 0.0}


The issue is that the plotted line graph will either dip below or rise above the actual value. Eg. The line rises slightly from x=1 to x=2 even though both y-values should be 10.1. Similarly, the line dips slightly below 0 from x=5 to x=6, even though both y-values should be 0.

When I use the same data to plot a bar chart with instead of, the chart appears to be correct.

Here are the code snippets that may be causing the issue.


defmodule MyWeb.Helpers.BarchartHelper do
  alias Contex.{Dataset, BarChart, Plot, LinePlot}

  def make_bar_chart_dataset(data), do:

  def make_pipeline_chart(dataset) do # or to plot a barchart

  def render_bar_chart(chart, title, subtitle, x_axis, y_axis) do, 400, chart)
    |> Plot.titles(title, subtitle)
    |> Plot.axis_labels(x_axis, y_axis)
    |> Plot.to_svg()


defmodule MyWeb.TestLive.TestChart do
  use MyWeb, :live_component
  use MyWeb, :chart_live

  def update(%{total_resources: total_resources} = assigns, socket) do
     |> assign(assigns)
     |> assign(:total_resources, total_resources)
     |> assign_dataset()
     |> assign_chart()
     |> assign_chart_svg()}

  def assign_dataset(%{assigns: %{total_resources: total_resources}} = socket) do
    socket |> assign(:dataset, make_bar_chart_dataset(total_resources))

  def assign_chart(%{assigns: %{dataset: dataset}} = socket) do
    socket |> assign(:chart, make_pipeline_chart(dataset))

  def assign_chart_svg(%{assigns: %{chart: chart}} = socket) do
    |> assign(
      render_bar_chart(chart, "Title", "Subtitle", "X axis", "Y axis")

  def render(assigns) do
      <%= @chart_svg %>

Thank you in advance.

Best wishes,
Jing Hui P.

1 Like

Disable smoothing as this is what is causing that visual glitch. If you look closely you will see that the data is still the same, just the visual representation of interpolated data “in between” the points is visually below 0.

1 Like

Correct! It’s a Catmull-Rom spline used to smooth the line - the algorithm can overshoot in certain circumstances.

Thank you @hauleth @mindok!

def make_pipeline_chart(dataset) do
  options = [
    data_labels: false,
    smoothed: false,
    custom_x_formatter: &my_fn/1
  ], options)

Cheers! :heart:

1 Like