How to make charts in html
How to make charts in html?
A chart plays a vital role in visualizing the data and makes people to understand complicated data more easily. Let’s see, how to create charts in html5.
Step-1: Adding Script file
First, we should include ej2.min.js script file in the sample. It contains all dependencies to render the chart.
<html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> </html>
Step-2: Creating Chart Container
Create a container for chart to get render.
<html> <body> // Chart container <div id="container"></div> </body> </html>
Step-3: Creating the chart
Here are the steps to create the chart:
- Create new chart instance by using new ej.charts.Chart().
- Assign the data using dataSource property in series.
- Bind the x and y values of data source with xName and yName properties
- You can select chart types (like line, column, area etc..) using type property in series.
- Now append the chart instance to the container to render the chart.
Basic Column Chart
Consider the following data to visual with column chart.
Country Name | Total medals |
USA | 50 |
China | 40 |
Japan | 70 |
Australia | 60 |
France | 30 |
<div id="container"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
title: 'Countries',
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'Medals in number'
},
//Initializing Chart Series
series: [
{
type: 'Column',
dataSource: [
{ country: "USA", medal: 50 },
{ country: "China", medal: 40 },
{ country: "Japan", medal: 70 },
{ country: "Australia", medal: 60 },
{ country: "France", medal: 30 },
],
xName: 'country',
yName: 'medal',
}
],
});
chart.appendTo('#container');
</script>
Basic Chart Demo
Step-4: Customizing the Chart
Adding Chart Title
Add title to the chart, to provide quick information about the data plotted in the chart.
var chart = new ej.charts.Chart({
title: 'Olympic Medals'
});
chart.appendTo('#container');
Adding marker
Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point. Markers can be added to the points by enabling the visible property.
var chart = new ej.charts.Chart({
series: [
{
marker: {
visible: true,
}
}
],
});
chart.appendTo('#container');
Adding data label
You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the dataLabel object.
var chart = new ej.charts.Chart({
series: [
{
marker: {
dataLabel: { visible: true }
}
}
],
});
chart.appendTo('#container');
Adding Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in tooltip object.
var chart = new ej.charts.Chart({
tooltip: {enable: true},
});
chart.appendTo('#container');
