HTML on fusion chart Caption and subcaption

Question

I have been trying to add HTML tags and Character to fusion chart Caption and subCaption but was unable to execute.

I have tried the method in this documentation link and also tried an old one but it also doesn't work.

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": ""Quarterly Revenue",
          "subCaption": "<span> Last year </span>",
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          //Caption cosmetics 
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#993300",
          "subcaptionFontBold": "0",
          //Theme
          "theme": "fusion"
        },
        "data": [{
          "label": ""Q1",
          "value": "1950000"
        }, {
          "label": "" Q2",
          "value": "1450000"
        }, {
          "label": "Q3",
          "value": "1730000"
        }, {
          "label": "Q4",
          "value": "2120000"
        }]
      }
    })
    .render();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>



<div id="chart-container">FusionCharts will render here</div>

Answer 1

The only thing I can think of (without messing with the source too much) is to attach an event handler and adding your HTML.

Here is how I planned it:

1. When Captions are rendered fire an evevnt - rendered
2. Get the position of the subcaption from the calculated element.
3. Create foreignObject to store and append your HTML.
4. Use the chart options to fill the HTML content and some other quick settings:

Here is the code (its quick and dirty but it does the job :)

JSFiddle Example

    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      // Attach event handlers
      events: {
        // Attach to beforeRender
        "rendered": function(eventObj, argsObj) {
          console.log(this);
          let $caption = $(eventObj.sender.container).find("g[class$=-caption]");
          let $subcaption = $caption.find("text").eq(1);
          //Create a foreign element - that will render inside SVG:
          let foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
          //Html subCaption is derived from the options:
          let subCaption = $(this.args.dataSource.chart.subCaption);
          //Set foreign attributes - should be set forceCaptionAttr: 
          foreign.setAttribute("x", $subcaption.attr("x"));
          foreign.setAttribute("y", $subcaption.attr("y"));
          foreign.setAttribute("style", $subcaption.attr("style"));
          $.each(this.args.dataSource.chart.forceCaptionAttr, function(key, value) {
            switch (key) {
              case "offsetX":
                foreign.setAttribute("x", parseInt($subcaption.attr("x")) + value);
                break;
              case "offsetY":
                foreign.setAttribute("y", parseInt($subcaption.attr("y")) + value);
                break;
              default:
                foreign.setAttribute(key, value);
                break;
            }

          });
          //Remove SVG text element:
          $subcaption.remove();
          //Append the subcaption to foreign:
          foreign.appendChild(subCaption[0]);
          //Append to Caption svg container:
          $caption[0].appendChild(foreign);
        }
      },
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "\"Quarterly Revenue\"",
          "subCaption": "<strong>I'm Displaying HTML in SVG &#128540;</strong></span>",
          // the intial values are taken from the text svg -> this wil change the values so u can fix some positioning issues:
          "forceCaptionAttr": {
            offsetX: -100,
            offsetY: -10,
            width: 250,
            height: 30
          },
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#fff",
          "subcaptionFontBold": "0",
          "theme": "fusion"
        },
        "data": [{
            "label": "\"Q1\"",
            "value": "1950000"
          },
          {
            "label": "\"Q2\"",
            "value": "1450000"
          },
          {
            "label": "\"Q3\"",
            "value": "1730000"
          },
          {
            "label": "\"Q4\"",
            "value": "2120000"
          }
        ]
      }
    })
    .render();
});

Answer 2

The contents of caption and subcaption are treated as string.

Please look into the sample below. Hope this is your desired output -

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "\"Quarterly Revenue\"",
          "subCaption": "<span>Last year</span>",
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#993300",
          "subcaptionFontBold": "0",
          "theme": "fusion"
        },
        "data": [
          {
            "label": "\"Q1\"",
            "value": "1950000"
          },
          {
            "label": "\"Q2\"",
            "value": "1450000"
          },
          {
            "label": "\"Q3\"",
            "value": "1730000"
          },
          {
            "label": "\"Q4\"",
            "value": "2120000"
          }
        ]
      }
    })
    .render();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>



<div id="chart-container">FusionCharts will render here</div>