highchartsでグラフを描いていると、その値をポップアップで表示したい時があります。
そういうときは、プロパティに「tooltip」を指定すれば、グラフの上をマウスオーバーした時に値を表示することができます。

イメージとしては、こんな感じです。

f:id:sho322:20140515065814j:plain

このイメージを表示するのは以下のようなコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>highchartsのサンプル</title>

<style type="text/css">
.example-container {
    border: 1px solid #000;
    padding: 20px;
    float: left;
    margin: 10px;
}

.example {
    width: 300px;
    height: 300px;
    float: left;
}
.example + .example {
    margin-left: 60px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-more.src.js"></script>
<script>
$(document).ready(function() {
    var formatter = function() {
        var tooltipMessage = ;
        tooltipMessage += データ( + (this.x + 1)+ )<br>;
        for (var i=0; i < this.points.length; i++) {
            tooltipMessage += 値[ + i + ] value: + this.points[i].y + <br>; 
        }

        return tooltipMessage;
    }

    var options = {
        chart: {
            type: bar
        },
        title: {
            text: ツールチップ表示してみる
        },
        series: [{
            name: Sample #1,
            data: [2,4,6,8]
        }, {
            name: Sample #2,
            data: [3,5,7,9]
        }],
        tooltip: {
            formatter: formatter,
            borderColor: darkslateblue,
            backgroundColor: thistle,
            shared: true
        }
    };

    $(#example1).highcharts(options);

});
</script>

</head>
<body>

<div class=example-container>
    <div class=example id="example1"></div>
</div>

</body>
</html>

tooltipに渡したformatterは、

<b>,<strong>,<i>,<em>

などのタグもサポートしている。