Line charts are the most basic and simplest type of chart used in many different fields. These charts are reader-friendly and the best way to show information in data points. Follow the below-given steps to draw a line chart using pluscharts.
Step 1:
The very first step will be to create an element in space for a line chart to be drawn. For this, the following code is used.
<div id=”line-chart-example”></div>
The next set of codes will be to load d3 and then pluscharts using the following scripts since the pluscharts library is built upon d3.
<script src=”https://d3js.org/d3.v5.min.js”></script>
<script src=”path-to/src/pluscharts.js”></script>
Step 2:
The JavaScript code to create a line chart is given below.
//Line chart example
pluscharts.draw({
drawOn : “#line-chart-example”,
type: “line”,
dataset : {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
},
{
x: 160,
y: 20
}
],
lineColor: “#e46161”,
lineWidth: 2,
legendLabel: “visitors”
},
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 1,
min: 0,
max: 160
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
})
To discuss the code further, consider each part of the code separately.
pluscharts.draw
({ })
This function is used to initiate the chart. Under this draw function, we pass the details of the chart including the data and options as the argument to the draw() function.
drawOn : ‘#line-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “line”,
In the type element, indicate the type of chart to be drawn.
dataset: {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
},
{
x: 160,
y: 20
}
],
lineColor: “#e46161”,
lineWidth: 2,
legendLabel: “visitors”
},
Dataset is what shapes the chart and where all the data of the chart is specified. The x and y data values, the line color, the line width and the legend labels are input here.
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 1,
min: 0,
max: 160
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want the width and height of the initiated container
height: ‘400’
}
}
Recommended Reading: How to create Column charts using Pluscharts
The options are where all the customization of the chart is done. Here the text and points, along with their color are specified. The x and y-axis minimum and maximum range are shown, in addition to a display option. The visibility and dimensions of legends are also set here. The size of the chart is specified and can be set to ‘container’ in case the chart has to be of the same height and width as its initiated container.
