<div id="chart-container" class="chart"></div>
.chart {
width: 100%;
height: 400px;
}
const chartData = [
{
label: "Venezuela",
value: "290",
fontSize: "2.5vw"
},
{
label: "Saudi",
value: "260"
},
{
label: "Canada",
value: "180"
},
{
label: "Iran",
value: "140"
},
{
label: "Russia",
value: "115"
},
{
label: "UAE",
value: "100"
},
{
label: "US",
value: "30"
},
{
label: "China",
value: "30"
}
];
const chartConfig = {
type: "column2d",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subCaption: "In MMbbl = One Million barrels",
xAxisName: "Country",
yAxisName: "Reserves (MMbbl)",
numberSuffix: "K",
theme: "fusion",
captionFontSize: "4vw",
subCaptionFontSize: "3vw",
baseFontSize: "5vw",
outCnvBaseFontSize: "5vw",
labelFontSize: "2vw",
valueFontSize: "2vw",
xAxisNameFontSize: "2.5vw",
yAxisNameFontSize: "2.5vw",
yAxisValueFontSize: "1.5vw",
trendValueFontSize: 14
},
data: chartData
}
};
FusionCharts.ready(function () {
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
This Pen doesn't use any external CSS resources.