Overview
The Chart Widget allows you to add responsive chart in your web page. This widget contain all major charts types and all of these are fully customizable. The Chart Widget fulfill almost all your needs when making chart, this widget is well formatted so this reduce time in making chart.
Screenshot
The following is a GIF video to show you how to use the chart widget and the various options available :
Chart Widget
The following is a chart widget :
Company Performance
Chart
- Type : Select which type of chart you want in your page like Line chart, Bar chart, Pie Chart ..etc.
- Legend Position : Select the position of Legend.
- Custom Dimension : Toggle this to set or unset custom dimension.
- If Custom Dimension is turned on then.
- Custom Height : Set height of whole chart.
- Custom Width : Set width of whole chart.
Label Style
- Label Style : In this you can edit label of bars and create new label by entering name of the bar, you can separate bars by adding comma( , ) in between the labels as well as you can also delete bars by removing name of the label from the text area.
Datasets
Chart Dataset
- Label : Set name of dataset.
- Dataset : This text area also work same as ‘Label Style’. You can edit values of labels or bars and also separate values by adding comma( , ) in between values.
- Background Color : Set background color of dataset.
- Border Color : Set border color of dataset.
- Fill Color : Toggle color in the dataset.
Ticks
X-axis
- Color : Set color of horizontal labels.
- Size : Set size of horizontal labels.
- Rotate : Set rotation of horizontal labels.
- Begin At Zero : Toggle this to not to start horizontal labels from zero.
Y-axis
- Color : Set color of vertical labels.
- Size : Set size of vertical labels.
- Rotate : Set rotation of vertical labels.
- Begin At Zero : Toggle this to not to start vertical labels from zero.
Title Style
- Title : Set title of chart.
- Color : Set color of chart title.
- Alignment : Select the alignment for chart title.
- Typography : Set the font and text style of chart title.
NOTE - In advance option tab . Do more styling to the Chart Widget. To know more about advance option tab. CLICK HERE