Overview

PlusCharts is javascript charting library which is easy to setup and configure. You can use this chart in websites, internal applications and other web applications which renders in a browser.

Currently, Pluscharts supports bar, column, line, area, spline, pie and donut charts.

Getting started

You can download the latest version of PlusCharts library from our GitHub releases.

Usage

Once you download the pluscharts library, include the following style files and script files in your HTML. Since PlusCharts is based on d3.js, you have to include d3.js before including pluscharts.js.

<link rel="stylesheet" href="path-to/src/css/pluscharts.css">

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="path-to/dist/pluscharts.js"></script>

Basic example

Create an element on which the chart is to be loaded. For eg, create a div with id “pluscharts-example” as below:

  <div id=”pluscharts-example”></div>

Now, initialize the chart on this div with the following script:

  pluscharts.draw({
      drawOn : ‘#pluscharts-example’,
      type: “bar”,
     dataset : {
         data: [
            {
               label: “Jan”,
               value: 20
           },
          {
             label: “Feb”,
             value: 30
          }
      ],
      backgroundColor: “#5d62b4”,
      borderColor: “#5d62b4”,
      borderWidth: 0,
     legendLabel: “Visitors”
  },
  options : {
     barPadding: .65,
     text: {
        display: false,
        color: “#6c478c”
     },
     axes: {
        x: {
            display: true,
            min: 0,
            max: 60,
            ticks: 5
       },
       y: {
          display: true
       }
   },
   legends: {
       display: true,
       width: 20,
      height: 20
  },
  size: {
      width: ‘400’, //give ‘container’ if you want width and           height of initiated container
       height: ‘400’
   }
 }
});

Copyright 2019 © All rights Reserved. Design by Pluscharts