Froala Editor v4.2.0 is Here LEARN MORE
Themes
You can use Froala Charts to create web applications that include multiple instances of the different charts. However, if you need to maintain a consistent look and feel across the web apps, then you can do that using themes.
You can manually set the cosmetic and functional attributes for each chart in the corresponding JSON file. This can work if you deal with only a small number of charts. As the number of charts increases so does your hassles. That is where the Theme Manager shipped with Froala Charts comes in. You can use the Theme Manager to create centralized theme files (similar to CSS files) and then apply those themes to any number of charts.
In a theme file, you can centralize the following aspects of a chart or gauge:
- Visual appearance (data plot color, font color, font size, etc.)
- Behavior (hover effects for data plots)
- Intelligence (applying different colors to the positive and negative data plots in all column charts that use the theme)
Froala Charts ships with the following predefined themes:
- Froala
- Candy
A Column chart showcasing the 2 available themes mentioned above is given below, click a radio button to see how the look and feel of the chart changes with each theme.
CHART
Froala Charts will load here!
JSON
{
"chart": {
"theme": "froala",
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Two Years",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"exportEnabled": "1",
"divLineGapLen": "1"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Previous Year",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}]
}, {
"seriesname": "Current Year",
"data": [{
"value": "25400"
}, {
"value": "29800"
}, {
"value": "21800"
}, {
"value": "26800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
}, {
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}]
}]
};
FroalaCharts.ready(function() {
froalacharts = new FroalaCharts({
id: "chart_1",
type: 'column',
renderAt: 'ft',
width: '800',
height: '500',
dataSource: data
});
froalacharts.render();
}HTML
<head>
<title>My first chart using Froala Charts</title>
<script src="https://unpkg.com/[email protected]/froalacharts.js"></script>
<script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>
<script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.candy.js"></script>
<script type="text/javascript">
FroalaCharts.ready(function() {
var chartObj = new FroalaCharts({
type: 'column',
renderAt: 'chart-container',
width: '800',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "froala",
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Two Years",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"exportEnabled": "1",
"divLineGapLen": "1"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Previous Year",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}]
}, {
"seriesname": "Current Year",
"data": [{
"value": "25400"
}, {
"value": "29800"
}, {
"value": "21800"
}, {
"value": "26800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
}, {
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}]
}]
},
events: {
'beforeRender': function(eventObj, args) {
var options = {
'froala': 'Froala',
'candy': 'Candy'
},
themeSelected = 'froala',
chartRef = eventObj.sender;
var container = args.container;
var radioContainer = document.createElement('div');
radioContainer.style.cssText = "text-align: center; width: 100%;"
var spanLabel = document.createElement('span');
spanLabel.innerText = "Choose a theme: ";
var upadateTheme = function(event) {
var theme = event.target.value;
chartRef.setChartAttribute('theme', theme);
}
function radioWrapper(value, label, selected = false) {
const div = document.createElement('div');
const input = document.createElement('input');
const labelElement = document.createElement('label');
div.style.cssText = "display: inline-block; margin:10px 5px;";
labelElement.style.cssText = "margin-right: 5px;";
labelElement.innerText = label;
labelElement.setAttribute('for', value)
input.id = value;
input.type = 'radio';
input.name = "theme"
input.value = value
input.onchange = upadateTheme;
selected && input.setAttribute('checked', '');
div.appendChild(labelElement);
div.appendChild(input);
return div;
}
for (const key in options) {
var label = options[key];
var selected = themeSelected === key;
var radioOption = radioWrapper(key, label, selected);
radioContainer.appendChild(radioOption);
}
container.appendChild(radioContainer);
}
}
});
chartObj.render();
});
</script>
</head>
<div id="chart-container">Froala Charts will load here!</div>
</body>
</html>