Developer Runs locally Ready to use Built-in examples No tracking

Line Chart Maker

Type "label,value" per row to draw a line chart with data points, first-to-last change, rate and up/down/flat trend.

A line chart shows how a value changes over time, which suits daily active users, sales, body weight or temperature — data that has an order. The difference from a bar chart is one of emphasis: bars compare categories against each other, while a line traces how a single sequence moves, so connecting the points only makes sense for data with an inherent order.

The first-to-last change, the rate of change and an up/down/flat verdict appear alongside the chart, with a rate under 0.1% in absolute value treated as flat; when the first point is zero the relative rate cannot be computed, so the sign of the last point is used instead. Note that the verdict describes only the two end points — the wobble in between has to be read from the change-over-previous column, one segment at a time.

—
—
—
—
—

How to use

  1. Paste rows of label,value in time order.
  2. Read the chart with its data points.
  3. Check the first-to-last change and the trend verdict.
  4. Read the middle segments column by column rather than trusting the verdict alone.

How it works

How to enter the data

One record per line in label,value format; labels are optional (auto-numbered 1, 2, 3...), up to 50 lines, connected left to right in input order.

How the trend is judged

Overall change = last point minus first point, with the rate relative to the first point in parentheses; the trend follows that rate: a rate under 0.1% in absolute value counts as flat, otherwise rising or falling; when the first point is 0, the last point's sign decides.

Are negative values supported?

The y-axis adapts automatically: with negatives present the lower bound drops to a negative integer tick, using the same 1/2/5 x 10^n steps.

Code example

JavaScript Drawing a line chart with ECharts 

const chart = echarts.init(document.getElementById('chart'));

chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    smooth: false,
    symbolSize: 6,   // visible data points make outliers easy to spot
    data: [820, 932, 901],
  }],
});

Shell Computing deltas and the change rate on the command line 

# Print the delta against the previous row, line by line
awk -F, 'NR==1{prev=$2; print $0 ",delta"; next} {printf "%s,%+d\n", $0, $2-prev; prev=$2}' data.csv

# Change from first to last
awk -F, 'NR==1{first=$2} {last=$2} END{printf "first-to-last change %.2f%%\n", (last-first)/first*100}' data.csv

FAQ

What data suits a line chart?

Sequences ordered by time or position - monthly sales, weight logs, temperature curves. For unordered category comparisons, use a bar chart.

Does the line chart support negative values?

Yes. The y-axis bottom extends automatically to a negative integer tick (lowest -15 gives a floor of -20), so both signs plot fine.

What counts as flat?

An overall change rate with absolute value under 0.1% - the threshold keeps float tail error from reading tiny wiggles as trends.

How is the change rate computed when the first point is 0?

Dividing by zero is meaningless, so only the raw change is given; the trend uses the last point's sign: positive means rising, negative falling, zero flat.

Does drawing require a network connection?

No. Parsing, statistics and drawing all happen locally in the browser - it works offline.

What is the vs-previous column?

In the detail table, each point minus the one before it, positives carrying a + sign; the first point has no predecessor and shows a dash.

Can it draw multiple lines?

The current version draws one line at a time. Generate separate charts for each series to compare, or compute differences first and plot those.