Animated Evolution Graph In Vanilla JavaScript

Wondering how your business is doing over time? Use this animated, responsive, and highly customizable evolution graph built with Vanilla JavaScript to create flexible data visualizations.

See It In Action:

How to use it:

1. Install & download.

# Yarn
$ yarn add evolution-graph
# NPM
$ npm i evolution-graph

2. Import the Evolution Graph.

import EvolutionGraph from "evolution-graph";
import "evolution-graph/src/css/styles.css";

3. Prepare your data for the Evolution Graph.

const data = [
  {
    label: "Item1",
    className: "Item1",
    color: "#000",
    image: "1.svg",
    values: [0, 3, 4],
  },
  {
    label: "Item2",
    className: "Item2",
    color: "#333",
    image: "2.svg",
    values: [0, 2, 4],
  },
  {
    label: "Item3",
    className: "Item3",
    color: "#666",
    image: "3.svg",
    values: [0, 2, 3],
  },
  // ...
];
const labels = [
  "01/01/2001",
  "01/01/2011",
  "01/01/2021",
  // ...
];

4. Create a container to hold the graph.

<div id="evolution-graph-example"></div>

5. Initialize the Evolution Graph.

const graph = new EvolutionGraph({
      data,
      labels,
      barThickness: 30,
      renderValue: (value) => `${value}k`,
      onChange: (currentStep) =>
        console.log("Evolution Graph currentStep", currentStep),
});

6. Draw the graph.

graph.create("#evolution-graph-example");

7. Full graph options and callback functions.

const graph = new EvolutionGraph({
      data: [],
      labels: [],
      className: "",
      order: "desc", // "desc" or "asc"
      stepInterval: 1500,
      transitionTopInterval: 750,
      gap: 10,
      barThickness: 20,
      barLabelWidth: 100,
      timelineTrackThickness: 4,
      timelineTrackColor: "rgb(206, 206, 206)",
      timelineTrackFillColor: "rgb(9, 132, 227)",
      timelineMarkerSize: 14,
      timelineMarkerColor: "rgb(206, 206, 206)",
      renderValue: (value:Number) => value,
      onChange: (step:Number) => step,
}),

8. API methods.

// render the graph
graph.create(selector:String)
// set the current step
graph.setCurrentStep(step:Number)
// go to the previous step
graph.goToPreviousStep()
// go to the next step
graph.goToNextStep()
// play/pause the graph
graph.play()
graph.pause()

Changelog:

10/17/2022

• v1.2.15