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.
You can download the latest version of PlusCharts library from our GitHub releases.
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>
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’
}
}
});