FusionCharts - Using macros to embed data value and label in dynamic tooltips

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<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>
<!-- 
    Using macros to embed data value and label in dynamic tooltips

        Attributes: 
            # plottooltext 

    Macros:
       # $dataValue - Formatted value
       # $label - Label of the column
       # $value - Raw value of the column

    Deviation from theme:
       # toolTipBorderColor -  Set to #BBBBBB
       # toolTipBgColor -  Set to #666666
       # toolTipBgAlpha -  Set to 100
-->
<div id="chart-container">FusionCharts will render here</div>

CSS

#headerdiv {
  font-family: "Arial", "Helvetica";
  font-size: 12px;
  font-weight: bold;
}

#valueDiv {
  background-color: #FFFFFF;
  color: #003366;
  text-align: center;
  font-size: 25px;
  padding: 10px;
  margin-top: 5px;
  font-family: "Arial", "Helvetica";
}

JavaScript

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Quarterly Sales Summary",
        "subcaption": "(Roll over columns to see dynamic tool-tips)",
        "subcaptionFontBold": "0",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "numbersuffix": "K",
        //Tool-tip customization
        "toolTipBorderColor": "#003366",
        "toolTipBgColor": "#003366",
        "toolTipBgAlpha": "100",
        "plottooltext": "<span id='headerdiv' >$label</span>{br}<div id='valueDiv'>$dataValue</div>",
        "theme": "fint"
      },
      "data": [{
          "label": "Quarter 1",
          "value": "195"
        },
        {
          "label": "Quarter 2",
          "value": "155"
        },
        {
          "label": "Quarter 3",
          "value": "178"
        },
        {
          "label": "Quarter 4",
          "value": "192"
        }
      ]
    }
  });

  salesChart.render();

});