HTML5 & JS Line Charts
A line chart is a type of chart which displays information as a series of dataPoints connected by straight line segments. Each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis.
Markers are automatically disabled when there are large number of dataPoints. You can override this behaviour by manually setting markerSize to a value greater than zero.
Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.
Line Chart Specific Properties
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| dataSeries/ dataPoint | markerType | String | “circle” | “none”, “circle”, “square”, “cross”, “triangle” |
| dataSeries/ dataPoint | markerColor | String | dataSeries Color | “red”,”#1E90FF”.. |
| dataSeries/ dataPoint | markerBorderColor | String | dataSeries Color | “red”,”#1E90FF”.. |
| dataSeries/ dataPoint | markerSize | Number | auto. | 5,10.. |
| dataSeries/ dataPoint | markerBorderThickness | Number | 0 | 4,7.. |
| dataSeries | lineThickness | Number | 2 | 4,7.. |
Basic Line Chart
# Line
Line charts display raw data connected with a straight line.
# Usage
To visualize your data with an line chart, the main .charts-css class should be followed by the .line class.
table class="charts-css line"> . table> # Data
When you add data, you need to supply not only the data —size variable but also the —start variable that indicates the starting point.
table class="charts-css line" id="my-chart"> tbody> tr> td style="--start: 0.0; --size: 0.4"> span class="data"> $ 40K span> td> tr> tr> td style="--start: 0.4; --size: 0.2"> span class="data"> $ 20K span> td> tr> tr> td style="--start: 0.2; --size: 0.6"> span class="data"> $ 60K span> td> tr> tr> td style="--start: 0.6; --size: 0.4"> span class="data"> $ 40K span> td> tr> tr> td style="--start: 0.4; --size: 0.8"> span class="data"> $ 80K span> td> tr> tr> td style="--start: 0.8; --size: 0.6"> span class="data"> $ 60K span> td> tr> tr> td style="--start: 0.6; --size: 1.0"> span class="data"> $ 100K span> td> tr> tbody> table> # Dimensions
To control the chart dimensions you can use regular CSS. You can use media queries to set different dimensions for smaller devices.
#my-chart.line height: 200px; max-width: 400px; margin: 0 auto; > table class="charts-css line" id="my-chart"> . table> # Orientation
You can control the chart orientation, or direction. The initial orientation is top-to-bottom (on LRT and RTL languages) and right-to-left (on TTM languages). Using the .reverse class you can reverse the orientation.
table class="charts-css line reverse"> . table> # Heading
You can add a heading to your chart using the tag. By default the heading is hidden. To display the heading use the .show-heading class.
table class="charts-css line show-heading"> caption> Descriptive Chart Heading caption> . table> How to create a Line Chart With CSS ?
The Chart is a pictorial or graphical representation of the data visualization, based on certain conditions There are various types of charts available such as Bar Charts, Line Charts, Pie Charts, etc, that are used to represent important data. In this article, we will see how to create the Line chart using HTML & CSS.
A Line Chart is a chart that is used to display data in the form of points connected by straight lines. It is usually used to display those data that changes from time to time in a continuous manner.
Steps to create a Line chart: Here, we will see the steps to make the Line Chart by applying a little bit of knowledge of mathematics. There are some points that will be plotted on the coordinate axes, X-axis & Y-axis. So suppose we have 5 points ie., (40,80) , (80,120) , (120,80) , (160,120) , (200,80) and take x-axis and y-axis of 250 Units. Now, we will plot these points on the XY plane using the following steps:
Step 1: Create XY Plane: We will use a div tag and put an id selector with the name “chart”. After that, we will apply CSS using that id sector on this div to make it like XY Plane.
On implementing the above style, we will see the below output:
Step 2: Mark which axis is the x-axis and which axis is the y-axis:
We will use two
tags inside that div that contains the x-axis and y-axis and after that position it accordingly using CSS.
Here in CSS, we have made the position absolute, so that it can be positioned relative to its parent and then uses left and bottom to do so.
Step 3: Create Points and line segments joining those points:
We will make 4 sets of point and line segments. In those sets, the line segment will be starting from the point present in that set and goes to the nearer point. We will also make a point which will be our 5th point. This point will not be in any set with line segments because we only need 4 lines. So, no lines will be originating from this 5th point. Only one line will come and connect with this point. After that, our task is to position those points and line them according to their given coordinates.
Now, we will make 5 inside that main which was representing coordinate-axes. Then from that 5 div, we will take 4 div and make two div inside each of them. Where 1st div will be representing a point and the other will be representing a line. In the 5th div, we will only make a single div that will be representing the 5th point. Here, We haven’t created any div for the line because we only need 4 lines. There is no need for 5th line.
Now, we will use some Mathematics by taking the two nearest points and those are (40,80) and (80,120). So the length of the line between these two points will be the hypotenuse of the right-angled triangle made by the difference between their x-coordinate and y-coordinate. See below Fig. 1. Now for inclination, we will use the following trigonometric formula:
tan(angle) = Perpendicular / Base
So, we will calculate the length of the line and its inclination for every other line segment. We will use this information while styling every line segment. This is what our generalized HTML code will look like:
Step 4: Applying the CSS properties to those points & Lines:
Now, we have to use CSS to make those points and lines visible. We can see in the above HTML code that we have given “id” to every div that are representing a line and point. We will use these id selectors to style lines and points. Let’s see the CSS for one point and similarly, will be done for other points:
Now, let’s see the CSS for one line, and similarly, will be done for other lines:
Note: You must note that rotate() will by default rotate the line in a clockwise direction if the angle is passed without any sign. If you will pass the angle with the -ve sign then it will rotate in an anticlockwise direction. For instance, if we pass 45 degrees then it will rotate 45 degrees in the Clockwise direction and if we will pass -45 degrees then it will pass 45 degrees in Anticlockwise Direction.
Example: This example describes the creation of the Line Chart with the help of HTML & CSS.