Javascript Library for Making Simple SVG Graphs | oi.linechart.js

oi.linechart.js is a small, customizable, standalone JavaScript library for making simple SVG graphs/diagrams for Open Innovations projects.

svg chart library, online svg chart, svg charts, svg line graph generator, free svg charts, svg area chart, svg graph example, svg vertical bar chart


  • Supports single or multiple data series.
  • Custom tooltips and hashtags.
  • It allows you to update the data in a smooth motion.

How to make use of it:

1. Import the JavaScript library oi.linechart.min.js into the document.

<script src="oi.linechart.min.js"></script>

2. Create a container to hold the line graph.

<div id="chart-example"></div>

3. Initialize the line chart on the container element and set the properties for the x and y axis.

  var myChart = OI.linechart(document.getElementById('chart-example'),{
          'title': { 'label': 'x value' },
            "-3": {'label':-3},
            "-2": {'label':-2},
            "-1": {'label':-1},
            "0": {'label':0},
            "1": {'label':1},
            "2": {'label':2},
            "3": {'label':3}
          'title':{ 'label':'y value' },
            "0": {'label':0},
            "0.5": {'label':0.5},
            "1": {'label':1}

4. Define your data series.

var myData = [
    // ...

5. Multiple data series are also supported.

var myData = [
    // ...

var myData2 = [
    // ...

6. Add the data series to the chart.


7. Draw the line chart.


8. Add tooltips to the chart.

  'title': 'My Chart',
  'points':{ 'size':4, 'color': '#FF6700' },
  'line':{ 'color': '#FF6700' },
  'tooltip':{ 'label': label }

9. All possible options for customizing the line graph.

var myChart = OI.linechart(document.getElementById('chart-example'),{
    'font-size': 16,

Chart properties

When creating a new line chart you can set chart properties:

  • left – the edge of the chart from the left-side of the chart area
  • right – the edge of the chart from the right-side of the chart area
  • top – the edge of the chart from the top-side of the chart area
  • bottom – the edge of the chart from the bottom-side of the chart area
  • axis – properties about the axes
  • axis.x – properties for the x-axis (see below)
  • axis.y – properties for the y-axis (see below)
  • key – an object defining a key
  • – is a key visible (default = false)

You can also update the properties of the chart later using chart.setProperties(props).

Axis properties

  • label – a title for the axis
  • line – an object defining the axis line
  • – a boolean value to set the visibility of the line (default = true)
  • line.stroke – the stroke (default = black)
  • line.stroke-width – the stroke width (default = 1)
  • min – hardcode a minimum for the chart
  • max – hardcode a maximum for the chart
  • grid – an object defining the grid
  • – a boolean value to set the visibility of the grid lines (default = false)
  • grid.stroke – the stroke (default = black)
  • grid.stroke-width – the stroke width (default = 1)
  • labels – an object of hard-coded tick marks/labels
  • labels.value – an object describing the label for value
  • labels.value.label – a string for the label
  • labels.value.fill – a hex/rgb colour for the label fill
  • labels.value.length – the length of the tick
  • labels.value.align – top or bottom (default) for the x-axis or left (default) or right for the y-axis tick marks
  • labels.value.dx – shift the label position horizontally
  • labels.value.dy – shift the label position vertically

Add a series

You can add a series using chart.addSeries(data,attr) where data is of the form [{x:1,y:0.1},{x:2,y:0.2},{x:3,y:0.3}] and attr is of the form:

  • points – an object styling the points
  • – a boolean to set the point visibility (default = true)
  • points.color – the hex/rgb colour of the points
  • points.size – either a number of function for setting the size of the points
  • points.stroke-width – set the width of the stroke
  • line – an object styling the line
  • – a boolean to set the line visibility (default = true)
  • line.color – the hex/rgb colour of the line
  • line.stroke-width – set the width of the stroke
  • line.stroke-dasharray – set the stroke’s dash array
  • tooltip – an object styling the tooltip
  • tooltip.label – either a fixed string or a function that generates the tooltip text using properties of the data.

Tiny Customizable SVG Line Chart Library, oi.linechart.js Plugin/Github

See Demo And Download

Official Website(open-innovations): Click Here

This superior jQuery/javascript plugin is developed by open-innovations. For extra Advanced usage, please go to the official website.