JavaScript Library To Draw Charts With Ease | chartress.js

chartress.js is a lightweight JavaScript library that uses SVG.js to draw responsive line/column/pie charts on an HTML page.

svg chart examples, chart js svg, svg radial chart, free svg charts, svg vertical bar chart, svg bar chart

How to make use of it:

Load both the SVG.js library and the chartress.js library into the HTML document.

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

Create a container element in which you want to display 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 diagram.

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);
});

General 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 an SVG chart to a canvas.

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

SVG Base Chart Library, chartress.js Plugin/Github


See Demo And Download

Official Website(jsnanigans): Click Here

This superior jQuery/javascript plugin is developed by jsnanigans. For extra advanced usage, please go to the official website.

Share