<div id="chart-container" class="chart"></div>
.chart {
  width: 100%;
  height: 400px;
}
FusionCharts.ready(function () {
  var revenueChart = new FusionCharts({
    type: "column2d",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption:
          "<span style='stroke:green;'>Sales<br> of Top <u>Brands</u></span>",
        subCaption:
          "<abbr title = 'subCaption'>This is SubCaption with abbr</abbr> and <strike>strike</strike>",
        xAxisName: "<span style='fill:blue;'>Brand <em>Names</em></span>",
        yAxisName: "<del>Amount (In USD)</del>",
        yAxisMaxValue: "120000",
        numberPrefix: "$",
        useEllipsesWhenOverflow: "1",
        theme: "fusion",
        chartBottomMargin: "70",
        PlotfillAlpha: "100",
        placeValuesInside: "1",
        rotateValues: "0",
        valueFontColor: "#333333",
        valuePadding: "-10"
      },
      data: [
        {
          label: "<i>ButterFinger</i>",
          value: "92000",
          displayvalue: "<b>92K</b>"
        },
        {
          label: "<abbr title='Snicker factory'>Snickers</abbr>",
          value: "87000"
        },
        {
          label: "<b>Coffee</b>",
          displayvalue: "<abbr title='Coffee Crisp'>Label with Abbr</abbr>",
          value: "83000"
        },
        {
          label: "<s>100Grand</s>",
          value: "80000"
        }
      ]
    }
  }).render();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/release_3.16.0/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js