Loading
Data Plot
Data plot refers to the column in column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart. This section shows how you can enhance the way your data plot looks with the help of colors, gradients and hover effects.
This section talks about:
-
Configuring colors for data plots
-
Customizing gradient effect for data plots
-
Configuring plot transparency
-
Configuring plot border
-
Configuring plot hover effects
Configuring colors for data plots
Specifying color for individual data plots
Using FusionCharts Suite XT you can specify a custom color for each data plot. A column 2D chart with colors based on the quarter of the year is shown below:
Given below is the list of attributes used to define custom colors for individual data plots:
| Attribute Name | Description |
|---|---|
|
Sets the data-plot color in hex code, eg. |
|
Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., |
The data structure used, in the chart above, to customize colors for individual data plots is as follows:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000",
"color": "#008ee4"
},
{
"label": "Feb",
"value": "810000",
"color": "#008ee4"
},
{
"label": "Mar",
"value": "720000",
"color": "#008ee4"
},
{
"label": "Apr",
"value": "550000",
"color": "#9b59b6"
},
{
"label": "May",
"value": "910000",
"color": "#9b59b6"
},
{
"label": "Jun",
"value": "510000",
"color": "#9b59b6"
},
{
"label": "Jul",
"value": "680000",
"color": "#6baa01"
},
{
"label": "Aug",
"value": "620000",
"color": "#6baa01"
},
{
"label": "Sep",
"value": "610000",
"color": "#6baa01"
},
{
"label": "Oct",
"value": "490000",
"color": "#e44a00"
},
{
"label": "Nov",
"value": "900000",
"color": "#e44a00"
},
{
"label": "Dec",
"value": "730000",
"color": "#e44a00"
}
]
}Specifying a list of colors for different data series/data plots:
You can also specify a comma separated list of colors for use in different data series (or in case of single series charts, different data plots). The colors are selected from the list in a round-robin way for each data series.
A multi-series 2D chart configured with a comma separated list of colors looks as below:
{
"chart": {
"caption": "Quarterly Sales - By employee",
"subcaption": "Last year",
"xaxisname": "Employee",
"yaxisname": "Amount (in USD)",
"numberprefix": "$",
"showValues": "0",
"paletteColors": "#EED17F,#97CBE7,#074868,#B0D67A,#2C560A,#DD9D82",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Mark"
},
{
"label": "John"
},
{
"label": "Symonds"
},
{
"label": "Peter"
}
]
}
],
"dataset": [
{
"seriesname": "Q1",
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
}
]
},
{
"seriesname": "Q2",
"data": [
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
}
]
},
{
"seriesname": "Q3",
"data": [
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"seriesname": "Q4",
"data": [
{
"value": "35000"
},
{
"value": "27500"
},
{
"value": "32500"
},
{
"value": "34000"
}
]
}
]
}Given below is the attribute used to specify a comma separated list of colors for coloring data series:
| Attribute Name | Description |
|---|---|
|
Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., |
The data structure needed to specify a comma separated list of colors for use in different data series is given below:
{
"chart": {
"caption": "Quarterly Sales - By employee",
"subcaption": "Last year",
"xaxisname": "Employee",
"yaxisname": "Amount (in USD)",
"numberprefix": "$",
"showValues": "0",
"paletteColors": "#EED17F,#97CBE7,#074868,#B0D67A,#2C560A,#DD9D82",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Mark"
},
{
"label": "John"
},
{
"label": "Symonds"
},
{
"label": "Peter"
}
]
}
],
"dataset": [
{
"seriesname": "Q1",
"data": [
{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
}
]
},
{
"seriesname": "Q2",
"data": [
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
}
]
},
{
"seriesname": "Q3",
"data": [
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
}
]
},
{
"seriesname": "Q4",
"data": [
{
"value": "35000"
},
{
"value": "27500"
},
{
"value": "32500"
},
{
"value": "34000"
}
]
}
]
}Customizing gradient effects for data plots
Adding gradient effect to data plots
You can apply a global gradient color for an entire data plot as described in this sub-section.
A column 2D chart with global gradient color specified for individual data plots is shown below:
The list of attributes used to configure gradient color for data plots is shown below:
| Attribute Name | Description |
|---|---|
|
Set this to |
|
You can globally add a gradient color to the entire plot of chart by specifying the second color as this attribute. For example, if you’ve specified individual colors for your columns and now you want a gradient that ends in white, you need to specify |
The data structure used, for the chart above, to apply gradient color to data plots is as follows:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
"usePlotGradientColor": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000",
"color": "#008ee4"
},
{
"label": "Q2",
"value": "1450000",
"color": "#9b59b6"
},
{
"label": "Q3",
"value": "1730000",
"color": "#6baa01"
},
{
"label": "Q4",
"value": "2120000",
"color": "#e44a00"
}
]
}Customizing gradient properties
Apart from a basic gradient effect, you can also customize the gradient angle, and fill ratio for a data plot. A column 2D chart with customized gradient properties used for data plots looks as below:
Given below is the list of attributes used to configure gradient effects:
| Attribute Name | Description |
|---|---|
|
Sets the fill angle for gradient (for column, area and pie charts). Values can range from |
|
Specifies the start and end of the gradient effect in a comma separated format. For example a setting of “20, 40” would cause the gradient effect to start at 20% of width and end at 40% of width. The colour before gradient start would be set to the data plot color and after gradient end would get set to the gradient fill color. |
The data structure used, in the chart above, to apply custom gradient properties for data plots is as follows:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showshadow": "1",
"usePlotGradientColor": "1",
"plotGradientColor": "#003366",
"plotFillAngle": "0",
"plotFillRatio": "0,100"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}Customizing data plot transparency
You can set the transparency of a data plot fill colour. A column 2D chart with data plot transparency property applied looks as below:
Given below is the list of attributes used to customize transparency of a data plot:
| Attribute Name | Description |
|---|---|
|
Used to set the transparency of all data plots in chart object. In case of gradients we can provide more than one alpha in a comma separated format. Values ranges from |
|
Sets the transparency for specific dataset / data plot using |
The data structure used, in the chart above, to customize transparency for data plots is as follows:
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "90",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Previous Year",
"alpha": "30",
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Current Year",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "26800"
}
]
}
]
}Customizing plot border
Showing or hiding plot border
Every data plot (column, area, or pie) has a border by default.You can choose to either retain the border or remove it. A chart with the ability to configure plot borders is shown below:
Given below is the attribute used to hide the plot border:
| Attribute Name | Description |
|---|---|
|
Set the value to |
The data structure used, in the example above, to hide border for data plots is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}Using a dashed data plot border
You can set a dashed border for the data plot and can also customize dash-length and the gap between dashes. A column 2D chart with a black dashed border around the data plots looks as below:
Given below is a brief description of the attributes used to change the data plot border:
| Attribute Name | Description |
|---|---|
|
Set this to |
|
Sets the length of each dash in plot-border (in pixels). This is applicable at a chart object level. |
|
Sets the gap between two consecutive dashes in plot border (in pixels). This is applicable at a chart object level. |
|
Set this to |
|
Sets the length of each dash in plot-border (in pixels). Affects an individual data-plot. |
|
Sets the gap between two consecutive dashes in plot border (in pixels). Affects an individual data-plot. |
The data structure needed to apply border properties for data plots is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1",
"plotBorderDashed": "1",
"plotBorderDashLen": "4",
"plotBorderDashGap": "4",
"plotBorderThickness": "1",
"plotBorderColor": "#000000"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}Using rounded edges
You can configure data plots with rounded edges in 2D Column or Bar charts. A chart with the data plots having round edges is shown below:
Given below is a brief description of the attributes used to apply round edges for data plots:
| Attribute Name | Description |
|---|---|
|
Set this attribute to |
The data structure needed to apply round edges for data plots is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"useRoundEdges": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}Configuring plot hover effects
You can display hover effects for data plots to add an interactive element to the charts. Shown below is a chart with hover effects enabled:
Given below is the list of attributes used to configure hover effects at a chart level. These settings are used in the chart object and will apply to all data plots in a chart.
| Attribute Name | Description |
|---|---|
|
Set this to |
|
Sets the hover color for data plots. Value should be in hex code format, eg. |
|
Sets the transparency for hover colour for data plots. Can take values from |
|
Sets the hover border color. Value should be in hex code format, eg. |
|
Sets the transparency of hover borders. Can take values from |
|
Sets the hover border thickness (in pixels). |
|
Set this to |
|
Sets the length of each dash for all data plots on hover(in pixels). |
|
Sets the gap between two consecutive dashes for all data plots on hover(in pixels). |
Given below is the list of attributes used to configure hover effects for individual data plots.
| Attribute Name | Description |
|---|---|
|
Sets the hover color for data plots. Value should be in hex code format, eg. |
|
Sets the transparency for hover colour for data plots. Can take values from |
|
Sets the hover border color. Value should be in hex code format, eg. |
|
Sets the transparency of hover borders. Can take values from |
|
Sets the hover border thickness (in pixels). |
|
Set this to |
|
Sets the length of each dash for all data plots on hover(in pixels). |
|
Sets the gap between two consecutive dashes for all data plots on hover(in pixels). |
The data structure used, in the chart above, to configure hover effects is shown below:
{
"chart": {
"caption": "Quarterly Revenue ",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"plotHoverEffect": "1",
"plotBorderHoverThickness": "1",
"plotBorderHoverDashed": "1",
"plotBorderHoverDashLen": "6",
"plotBorderHoverDashGap": "2"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}