Animated Evolution Graph In Vanilla JavaScript

Preview:

Description:

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