チャート内のホバー上のポイントサイズと色を変更する

Question

chartjを使用して折れ線グラフを作成しました。今私は誰かがポイント上にマウスを置くと、ポイントのサイズと色が変わることを望んでいます。私はいくつかのオプションを試してみましたが、それを動作させることはできませんでした。誰かが私を助けてくれますか？

のjavascript：

var ctx = $('#chart'); 
var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: [1, 2, 3, 4, 5], 
    datasets: [{ 
    label: '# of votes', 
    data: [1, 2, 3, 4, 5], 
    fill: false 
    }] 
} 
}) 

Answer 1

はホバー上のデータポイントの色やサイズを変更するには、次のように、データセットのそれぞれpointHoverBackgroundColorとpointHoverRadius財産（必要に応じて）を設定する必要がありますそう...

datasets: [{ 
    ... 
    pointHoverRadius: 5, 
    pointHoverBackgroundColor: 'red' 
}] 

ᴅᴇᴍᴏ

var ctx = $('#chart'); 
 
var myLineChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: [1, 2, 3, 4, 5], 
 
     datasets: [{ 
 
     label: '# of votes', 
 
     data: [1, 2, 3, 4, 5], 
 
     fill: false, 
 
     pointHoverRadius: 5, 
 
     pointHoverBackgroundColor: 'red' 
 
     }] 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="chart"></canvas>