New Froala Editor v4.5.1 is here – Learn More
Stacked Column Chart
In Stacked charts plot datasets are on top of each other. Stacked charts help in displaying the cumulative magnitude of two or more data series. They help in representing a data value as a sum of two or more values. Each data series can be distinguished by the color of its section in the stack.
Caption
The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it
Subcaption
The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.
Data Plot
Data plot refers to the pie slices in a pie chart, columns of the column chart, lines in a line chart.
Legend
A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.
Tooltip
A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.
X-Axis
X-Axis refers to a line on a chart that runs horizontally (left-right).
Y-Axis
Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero.
X-Axis Labels
X-Axis labels are the names of the data points that are displayed on the x-axis of a chart.
Export Menu
Export menu that appears on top-right of the chart, it offers different options to export a chart.
You can enable or disable chart export using attributeexportEnabled. Refer to Exporting Charts to learn
more.
Create a Stacked Column Chart
For a detailed list of attributes, refer to the Stacked Column Chart attributes page.CHART
JSON
HTML
CHART
Chart data in the selected format will be displayed here.
FroalaChart will render here
JSON
{
chart: {
caption: “Yearly Energy Production Rate”,
subcaption: ” Top 5 Developed Countries”,
numbersuffix: ” TWh”,
showsum: “1”,
plottooltext:
“$label produces <b>$dataValue</b> of energy from $seriesName”,
theme: “froala”,
drawcrossline: “1”
},
categories: [
{
category: [
{
label: “Canada”
},
{
label: “China”
},
{
label: “Russia”
},
{
label: “Australia”
},
{
label: “United States”
},
{
label: “France”
}
]
}
],
dataset: [
{
seriesname: “Coal”,
data: [
{
value: “400”
},
{
value: “830”
},
{
value: “500”
},
{
value: “420”
},
{
value: “790”
},
{
value: “380”
}
]
},
{
seriesname: “Hydro”,
data: [
{
value: “350”
},
{
value: “620”
},
{
value: “410”
},
{
value: “370”
},
{
value: “720”
},
{
value: “310”
}
]
},
{
seriesname: “Nuclear”,
data: [
{
value: “210”
},
{
value: “400”
},
{
value: “450”
},
{
value: “180”
},
{
value: “570”
},
{
value: “270”
}
]
},
{
seriesname: “Gas”,
data: [
{
value: “180”
},
{
value: “330”
},
{
value: “230”
},
{
value: “160”
},
{
value: “440”
},
{
value: “350”
}
]
},
{
seriesname: “Oil”,
data: [
{
value: “60”
},
{
value: “200”
},
{
value: “200”
},
{
value: “50”
},
{
value: “230”
},
{
value: “150”
}
]
}
]
}
HTML
<html>
<head>
<title>Visualize Data Trends with Stacked Column Charts – Froala</title>
<script src=https://cdn.fusioncharts.com/fusioncharts/froalacharts/froalacharts.js></script>
<script src=”https://cdn.fusioncharts.com/fusioncharts/froalacharts/froalacharts.theme.froala.js”></script>
<script type=”text/javascript”>
var data = {
chart: {
caption: “Yearly Energy Production Rate”,
subcaption: ” Top 5 Developed Countries”,
numbersuffix: ” TWh”,
showsum: “1”,
plottooltext:
“$label produces <b>$dataValue</b> of energy from $seriesName”,
theme: “froala”,
drawcrossline: “1”
},
categories: [
{
category: [
{
label: “Canada”
},
{
label: “China”
},
{
label: “Russia”
},
{
label: “Australia”
},
{
label: “United States”
},
{
label: “France”
}
]
}
],
dataset: [
{
seriesname: “Coal”,
data: [
{
value: “400”
},
{
value: “830”
},
{
value: “500”
},
{
value: “420”
},
{
value: “790”
},
{
value: “380”
}
]
},
{
seriesname: “Hydro”,
data: [
{
value: “350”
},
{
value: “620”
},
{
value: “410”
},
{
value: “370”
},
{
value: “720”
},
{
value: “310”
}
]
},
{
seriesname: “Nuclear”,
data: [
{
value: “210”
},
{
value: “400”
},
{
value: “450”
},
{
value: “180”
},
{
value: “570”
},
{
value: “270”
}
]
},
{
seriesname: “Gas”,
data: [
{
value: “180”
},
{
value: “330”
},
{
value: “230”
},
{
value: “160”
},
{
value: “440”
},
{
value: “350”
}
]
},
{
seriesname: “Oil”,
data: [
{
value: “60”
},
{
value: “200”
},
{
value: “200”
},
{
value: “50”
},
{
value: “230”
},
{
value: “150”
}
]
}
]
};
FroalaCharts.ready(function () {
FroalaCharts.options.license({
key:’rpI3xgkA3D5B3A4D4I4E3C10A6E2B2E2oyjG1C3C8D4E3D2C2C3I2H1B10D3D1F4D5D3B-8I-8G7B6A6E3tB2C1C1uomB1E6B1C3F3B2A21A14B14A8D8blA-9H4C2B2A1A1A1E7B1E5E4B1C3B9A4e==’,
creditLabel: false })
new FroalaCharts({
id: “chart_1”,
type: ‘stackedcolumn’,
renderAt: ‘ft’,
width: ‘800’,
height: ‘500’,
dataSource: data
}).render();
});
</script>
</head>
<div id=”msg” class=”mb-20″> Chart data in the selected format will be displayed here.</div>
<body>
<div id=”ft”>FroalaChart will render here</div>
</body>
</html>