SVG Base Chart Library – chartress.js

Preview:

Description:

chartress.js is a lightweight JavaScript library which uses SVG.js to draw responsive, line / column / pie charts on the html page. Also provides a method to convert the SVG chart into a canvas image.

How to use it:

Load both SVG.js and the chartress.js library in the html document.

<script src="svg.min.js"></script>
<script src="dist/chartress.js"></script>

Create a container element in which you want to render the SVG chart.

<div class="demo"></div>

Draw a simple line chart.

var linechart = {
    lines: [
      {
        name: 'Red',
        color: 'red',
        plot: [0, 10, 50, 80, 53, 20, 25, 80, 70, 5, 40],
      },{
        name: 'Black',
        plot: [40, 20, 1, 50, 60, 70, 100, 70, 40, 30, 10],
      },{
        name: 'Gray',
        dash: '10,5',
        color: 'gray',
        plot: [4, 6, 20, 18, 24, 8, 0, 0, 20, 10, 5],
      }
    ]
}
document.addEventListener("DOMContentLoaded", function(event) { 
  var chart = chartress(document.querySelector('.demo'), linechart);
});

Draw a simple column chart.

var coumnchart = {
    type: 'column',
    lines: [
      {
        name: 'MO',
        value: 40,
        color: 'orange',
        textColor: 'red'
      },{
        name: 'TU',
        value: 60
      },{
        name: 'WE',
        value: 30
      },{
        name: 'TH',
        value: 60
      },{
        name: 'FR',
        value: 90
      },{
        name: 'SA',
        value: 22
      },{
        name: 'SU',
        value: 15
      }
    ]
};
document.addEventListener("DOMContentLoaded", function(event) { 
  var chart = chartress(document.querySelector('.demo'), coumnchart);
});

Draw a simple pie chart.

var piechart = {
    type: 'pie',
    lines: [
      {
        value: 100
      },
      {
        value: 61,
        color: '#1b860b'
      }
    ]
};
document.addEventListener("DOMContentLoaded", function(event) { 
  var chart = chartress(document.querySelector('.demo'), piechart);
});

Global settings:

yMax: 0,
fontSize: 'Helvetica',
class: 'chartress',
padding: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
},
type: 'line',
yAxis: {
  markEvery: 1,
  label: {
    color: 'gray',
    x: 0
  },
  markEvery: 20,
},
xAxis: {
  range: {
    from: 0,
    to: null,
  },
  markEvery: 1,
  label: {
    color: 'gray',
    y: 0
  },
},
legend: {
  x: 100,
  y: 0,
  padding: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  }
},
columns: {
  width: 15,
  labels: {
    fontSize: 16,
    y: 1
  }
},
pie: {
  total: 100,
  red: 'blue',
  title: {
    size: 50,
    bold: true,
    text: false,
    pre: false,
    sub: false
  }
}

Convert the SVG chart into a canvas image.

chart.drawToCanvas(document.querySelector('#canvas'));