Tiny Customizable SVG Line Chart Library – oi.linechart.js

Preview:

Description:

oi.linechart.js is a lightweight JavaScript library for drawing customizable SVG line charts on the page.

Features:

• Supports single or multiple data series.
• Custom tooltips & tick marks.
• Allows you to update the data with a smooth animation.

How to use it:

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

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

2. Create a container to hold the line chart.

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

3. Initialize the linechart on the container element and set the x- and y-axis properties (titles & labels).

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

4. Define your own data series.

var myData = [
    {x:1,y:6.4},
    {x:2,y:7},
    {x:3,y:9.1}
    // ...
];

5. Multiple data series are supported as well.

var myData = [
    {x:1,y:6.4},
    {x:2,y:7},
    {x:3,y:9.1}
    // ...
];
var myData2 = [
    // ...
];

6. Add the data series to the chart.

myChart.addSeries(myData);

7. Draw the line chart. Done.

myChart.draw();

8. Add tooltips to the chart.

myChart.addSeries(myData,{
  'title': 'My Chart',
  'points':{ 'size':4, 'color': '#FF6700' },
  'line':{ 'color': '#FF6700' },
  'tooltip':{ 'label': label }
});

9. All possible options to customize the line chart.

var myChart = OI.linechart(document.getElementById('chart-example'),{
    'left':0,
    'top':0,
    'right':0,
    'bottom':0,
    'tick':5,
    'font-size': 16,
    'tooltip':{},
    'key':{
      'show':false,
      'border':{
        'stroke':'black',
        'stroke-width':1,
        'fill':'none'
      },
      'text':{
        'text-anchor':'start',
        'dominant-baseline':'hanging',
        'font-weight':'bold',
        'fill':'black',
        'stroke-width':0,
        'font-family':'sans-serif'
      }
    },
    'axis':{
      'x':{},
      'y':{}
    }
});

Changelog:

06/29/2022

• Clip data and add attributes