Chart Widget [ PRO ]

The Chart Widget allows you to visualise your data in a number of different ways. Choose from 6 chart types, each of them animated, fully customisable and engaging.

DEMO


Type : Choose from line, bar, radar, polar area, pie or doughnut charts.


Settings

These are general settings that apply to all the chart types.

Setup

Chart Height : Define the chart height in pixels.

Title

Display Title : Check this field if you want the chart title to be displayed.
Chart Title : Enter the chart title.
Position : Choose the title position in relation to the chart.
Text Color : The title's color.
Text Size : The title's font size in pixels.
Padding : The spacing around the title in pixels.

Legend

Display Legend : Check this field if you want to display the legend for the different chart items.
Position : Choose the legend position in relation to the chart.
Label Text Color : The labels color.
Label Text Size : The labels font size in pixels.
Label Padding : The spacing around the title in pixels.
Label Colored Box Width : The size of the box next to the label. Set this field to 0 if you do not want a colored box.

We shall be dealing with the options for each of the chart types one at a time.


Line Chart

Labels : The y-axis labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"
Datasets : This is a repeater field. Add many data items as you would like.
Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Fill : Decide if the area below the line should be colored.
Line Color : The line color.

Line Width : The line width in pixels.


Bar Chart

Labels : The y-axis labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"
Datasets : This is a repeater field. Add many data items as you would like.
Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Colors : The colors corresponding to the data items in order. This is a repeater item.

Border Width : The border width in pixels.


Radar Chart

Labels : The labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"
Datasets : This is a repeater field. Add many data items as you would like.
Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Fill : Decide if the area enclosed by the line should be colored.
Data Set Color : The datasets color.

Border Width : The border width in pixels.


Pie Chart

Labels : The labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"

Dataset

Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Colors : The colors corresponding to the labels in order. This is a repeater item.

Border Width : The border width in pixels.


Doughnut Chart

Labels : The labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"

Dataset

Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Colors : The colors corresponding to the labels in order. This is a repeater item.

Border Width : The border width in pixels.


Polar Area Chart

Labels : The labels in order. Separate each label with a comma. Surround each label with quotes. ex: "January", "February", "March", "April", "May", "June", "July"

Dataset

Label : The datasets label.
Data : The data values corresponding to the labels in order, separated by commas.
Colors : The colors corresponding to the labels in order. This is a repeater item.

Border Width : The border width in pixels.