Minimal Animated Line Chart Generator – noSvgChart

Preview:

Description:

noSvgChart is a simple lightweight JavaScript plugin that helps generates animated line charts using plain JavaScript, HTML, and CSS/CSS3. With no SVG and Canvas required.

How to use it:

1. Insert the noSvgChart’s JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>

2. Create an empty DIV element to hold the line chart.

<div class="charts-container"></div>

3. Prepare your data as follows:

const configs = {
  // x-axis
  x: {
    values: ["dec", "nov", "oct", "feb", "jan"],
    label: "x axis tilte e.g., Month"
  },
  // y-axis
  y: {
    values: [10, 20, 30, 40, 50],
    label: "y axis tilte e.g., Payed Vouchers"
  },
  // (x, y)
  points: [
    ["dec", 5],
    ["nov", 10],
    ["oct", 20],
    ["feb", 50],
    ["jan", 2]
  ],
}

4. Initialize the line chart.

new lineChart(config);

5. Config the line chart.

const configs = {
  title: "My Line Chart",
  options: {
    animated: true,
    colors: {
      graph: "#0dffe4",
      points: "#004637",
      lines: "#814A84",
      axes: "#9C27B0",
      text: "#1396F3",
    }
  }
}