`linechart`

Loads of examples!

Basic Examples

Simple usage for some simple line charts.

More Data

linechart({
  data: [10, 20, 10, 20, 10, 20, 50, 100],
});

Full-Width Line

While not obvious here, lines by default will not reach the bounds of their container, this behavior can be changed with the fullWidthLine option.

linechart({
  data: [10, 20, 10, 20, 10, 20, 50, 100],
  fullWidthLine: true, 
});

Styling

Line charts have a few different styling parameters available.

Basic Coloring

The colors parameter allows for coloring lines, a single string or array of color strings are accepted.

linechart({
  data: [50, 100, 30],
  colors: 'red', 
});

Thicker Line

The line's thickness is also adjustable!

linechart({
  data: [50, 100, 30],
  colors: 'red',
  thickness: 10, 
});

Smooth Line

Making the line smooth is also simple, just set lineType to "smooth"! For now though the smoothness amount isn't tweakable, but it will be.

linechart({
  data: [50, 100, 30],
  colors: 'red',
  thickness: 10,
  lineType: 'smooth', 
});

Gradients

Gradients, get your gradients!

linechart({
  data: [50, 100, 30],
  thickness: 10,
  lineType: 'smooth',
  gradientColors: ['#ff00ff', '#00ffff'], 
});

Let's have the gradient go from top to bottom instead.

linechart({
  data: [50, 100, 30],
  thickness: 10,
  lineType: 'smooth',
  gradientColors: ['#ff00ff', '#00ffff'],
  gradientDirection: 'top-to-bottom', 
});

Extras

There's a few more things you can do with linechart!

Multiple Lines

You can also have multiple lines! Instead of passing a single array of numbers, you can pass an array of numerical arrays, and each will become it's own line!

linechart({
  data: [
    [50, 100, 30], // Line 1
    [3, 15, 110], // Line 2
  ],
  thickness: 3,
  gradientColors: ['#ff00ff', '#00ffff'],
  gradientDirection: 'top-to-bottom',
});

You can also pass various options as an array as well, which will target the corresponding line! Check out the linechart API page for supported options, anything that has a type of T | T[] (as in, the type, or an array of that type) can be used in this way.

linechart({
  data: [
    [50, 100, 30], // Line 1
    [3, 15, 110], // Line 2
  ],
  thickness: [3, 10], 
  gradientColors: ['#ff00ff', '#00ffff'],
  gradientDirection: 'top-to-bottom',
});

Animation

Paths are capable of some really cool animations!

Animejs

Once again using my animation tool of choice, animejs! Here's a full example.

import { animate, svg } from 'animejs';
import { linechart } from 'toomanycharts';

const drawLine = () => {
  animate(svg.createDrawable('.da-line'), {
    draw: ['0 0', '0 1', '1 1'],
    ease: 'inOutCubic',
    duration: 2000,
    loop: true,
  });
};

export default function myLineChart() {
  const basic = linechart({
    data: [10, 20, 10, 20, 10, 20, 50, 100],
    thickness: 10,
    gradientColors: ['#ff00ff', '#00ffff'],
    gradientDirection: 'top-to-bottom',
    lineClass: 'da-line',
  });

  setTimeout(() => {
    drawLine();
  }, 100);

  return basic;
}

Results in:

While making the above example I got an idea! I bet with a couple tweaks this could be used to make a cool little visual, data aside!

And the code:

import { animate, stagger, svg } from 'animejs';
import { linechart } from 'toomanycharts';

const drawLine = () => {
  animate(svg.createDrawable('.da-line'), {
    draw: ['0 0', '0 1', '1 1'],
    ease: 'linear', 
    duration: 1000, // faster!
    delay: stagger(1000), // A staggered delay, so the targets are affected one after another instead of all at once
    loop: true,
  });
};

export default function myLineChart() {
  const basic = linechart({
    data: [
      [10, 20, 10, 20, 10, 20, 50, 90], // Two lines, that are basically opposites
      [90, 80, 90, 80, 90, 80, 50, 10], 
    ],
    fullWidthLine: true, // reach the end of the parent SVG
    thickness: 10,
    gradientColors: ['#ff00ff', '#00ffff'],
    lineClass: 'da-line',
    width: 500,
  });

  setTimeout(() => {
    drawLine();
  }, 100);

  return basic;
}

Linechart Examples