[Chart.js] ツールチップをカスタマイズする

2021年7月8日

chart.js テクノロジー プログラミング

eyecatch 「ツールチップ」と聞くと、「ポテトチップ」を連想してしまう、ユゲタです。 ツールチップというのは、パソコンなどで表示されているチャートで、マウスカーソルを合わせると、そのピンポイントの箇所の情報が ポップアップされるウィンドウの事です。 この画像の赤丸の箇所がツールチップです。 Chart.jsのデフォルトでは、黒背景に白い文字色で、必要最低限の値が表示されているだけですが、見栄えなどをカスタマイズする方法を紹介します。 日本語リファレンスは、 https://www.tohoho-web.com/ex/chartjs-params.html#tooltip こちらがわかりやすいでしょう。

カスタマイズサンプル

<canvas id="graph_1"></canvas> <script> (function(){ function MAIN(){ this.colors = [ "rgba(255,0,0,0.5)", "rgba(0,255,0,0.5)", "rgba(0,0,255,0.5)", "rgba(255,128,0,0.5)", "rgba(0,255,255,0.5)", "rgba(0,0,0,0.5)", "rgba(255,0,255,0.5)" ]; this.view_chart_1(); } MAIN.prototype.view_chart_1 = function(){ let canvas_1 = document.getElementById("graph_1"); if(canvas_1){ let col_num = 6; let data_count = 50; // setting let ctx = canvas_1.getContext('2d'); let labels = []; for(let i=1; i<=data_count; i++){ labels.push(i); } let datas = []; for(let i=0; i<labels.length; i++){ datas.push(Math.floor(Math.random() * 10000)); } let datasets = [ { data : datas, borderColor : this.colors[col_num], backgroundColor : this.colors[col_num], label : "graph-2" } ]; let options = { tooltips: { intersect : false, mode: 'index', axis: 'x', // title titleFontSize : 12, titleFontColor : 'black', titleFontStyle:"normal", titleAlign : "center", // body bodyFontSize : 12, bodyAlign : "right", bodyFontColor : "black", // 吹き出し内の余白 xPadding: 10, yPadding: 10, borderColor: 'black', borderWidth: 1, backgroundColor: 'white', cornerRadius: "0", // 吹き出し口 caretSize:0, // 表示文字のカスタマイズ callbacks: { title: (function (tooltipItem, data){ return "X軸 : "+ tooltipItem[0].index; }).bind(this), label: (function (tooltipItem, data){ return "Y軸 : " + tooltipItem.value; }).bind(this), } }, // 凡例クリックをクリック無効にする legend:{ onClick: function(){return false;}, }, scales: { x : { scaleLabel: { display: true, labelString: "年後" }, ticks : { maxTicksLimit : (function(labels , step){ let num = Math.round(labels.length / step); return num; })(labels , 1), maxRotation: 0, minRotation: 0, callback: function(val, index) { return (index + 1) % 5 === 0 ? val +"年" : ""; } }, }, y : { scaleLabel: { display: true, labelString: "万円" }, ticks : { callback: function(tick) { return '¥' + tick.toString(); } } } } }; // view this.chart_1 = new Chart(ctx, { type : "line", data : { labels : labels, datasets : datasets }, options : options, plugins : [ {beforeDraw : this.chart_plugin.bind(this)} ] }); console.log(this.chart_1); } }; MAIN.prototype.chart_plugin = function(target){ let ctx = target.ctx; var x = this.chart_1.tooltip.caretX; var topY = this.chart_1.chartArea.top; var bottomY = this.chart_1.chartArea.bottom; ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 2.0; ctx.strokeStyle = 'red'; ctx.stroke(); ctx.restore(); }; switch(document.readyState){ case "complete" : new MAIN();break; default : window.addEventListener("load" , function(){new MAIN()});break; } })() </script>

解説

Chart.jsのツールチップのカスタマイズは、実は非常に奥が深く、canvas内に表示する、デフォルト方式の他に、 canvas外にHTMLエレメントとして、表示をする方法も、公式サイトで公開されている。 ・・・が・・・ どうやっても、そのサンプルがうまく動作しなかったので、今回は、canvas内版でのカスタマイズ例を紹介したいと思います。 基本的に、デフォルトが黒バックに白文字という、あまりにも、ダサい状態なので、オサレな白地に黒で、文字サイズは抑えめにしたサンプルにしてみました。 そして、カスタマイズコードは、option/tooltips/以下の次の箇所になります。 // title titleFontSize : 12, titleFontColor : 'black', titleFontStyle:"normal", titleAlign : "center", // body bodyFontSize : 12, bodyAlign : "right", bodyFontColor : "black", // 吹き出し内の余白 xPadding: 10, yPadding: 10, borderColor: 'black', borderWidth: 1, backgroundColor: 'white', cornerRadius: "0", // 吹き出し口 caretSize:0, コメントを入れておいたので、そのまま理解できるとは思いますが、titleFontColorなどは、リファレンスサイトに載っていなかったので、 非常に苦労しました。 また、角丸を無くすのを、"borderRadius"とばかり思い込んでいたのが、"cornerRadius"だったことに気がつくまで、非常に時間を有しました。 こういうのって、手探りやったもんガチですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。