Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Plotly: a theme's line interpolation overrides an explicit `interpolate: "linear"`

Open Beginner friendly
  • Is something wrong?
#149 1 comment 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
79/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
plotly, typescript
Domain
data-visualization

Research direction

Start in packages/flint-js/src/plotly/theme.ts and trace how the Line Chart template sets line.shape and how the theme applies interpolation; compare with Connected Scatter's _preserveLineShape handling. Reproduce with the provided assemblePlotly example and check the resulting line.shape. Done when an explicit interpolate: "linear" stays linear under both themes while other interpolation choices still work.

Written by the indexing model from the issue text.

Description

What happens

With a theme that sets its own line interpolation (Cartoon: monotone, De Stijl: step), a Line Chart whose chartProperties ask for interpolate: "linear" is drawn curved or stepped on Plotly. Other curves are kept, and Vega-Lite keeps all three.

Theme interpolate Plotly line.shape Vega-Lite mark interpolate
(none) linear linear linear
cartoon linear spline linear
cartoon monotone spline monotone
cartoon step-after hv step-after
de-stijl linear hv linear
de-stijl monotone spline monotone
de-stijl step-after hv step-after

Reproduction (flint-chart 1.0.0)

import { assemblePlotly } from "flint-chart/plotly";

const input = {
  data: {
    values: [
      { date: "2025-01-01", value: 4 },
      { date: "2025-06-01", value: 6 },
      { date: "2026-01-01", value: 5 },
    ],
  },
  semantic_types: { date: "DateTime", value: "Quantity" },
  chart_spec: {
    chartType: "Line Chart",
    encodings: {
      x: { field: "date", type: "temporal" },
      y: { field: "value", type: "quantitative" },
    },
    chartProperties: { interpolate: "linear" },
  },
  theme_spec: "cartoon",
};

console.log(assemblePlotly(input).data[0].line.shape); // "spline", expected "linear"

Likely cause

In packages/flint-js/src/plotly/theme.ts, the theme fills in the line shape when it's unset or 'linear':

if (m.interpolate && !trace._preserveLineShape
    && (!trace.line.shape || trace.line.shape === 'linear')) {

The Line Chart template always sets line.shape ('linear' when no curve is asked for), so the theme can't tell an explicit linear from no choice. Connected Scatter avoids this with _preserveLineShape. Perhaps the Line Chart template could set that flag when chartProperties.interpolate is given, or leave line.shape unset when it isn't.

Why it matters to me

I let people pick a curve (straight, smooth, steps) for lab results over time, and a theme on top of that. Straight matters there: it doesn't suggest values between readings that were never measured.

Dominant language
TypeScript
Stars
4.4k
Forks
256
Avg merge
1d 16h
Merged PRs (30d)
9

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/flint-chart

All issues in microsoft/flint-chart

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.