बदलें चार्ट.जेएस टूलटिप कैरेट स्थिति

Question

मैंने Chart.js 2.5 का उपयोग करके एक डोनट चार्ट बनाया। मेरे पास जो समस्या है वह टूलटिप के साथ है। जब मैं चार्ट पर होवर करें, एक टूलटिप, एक कैरट कि हमेशा बाईं या दाईं ओर में रहता है के साथ प्रदर्शित किया जाता है इस तरह:

मैं कैरट स्थिति बदलने के लिए इतना है कि यह हमेशा में दिखाना चाहते हैं तल। क्या यह संभव है?

यहाँ मेरी चार्ट कोड

var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ['Jan', 'Feb', 'Mar'], 
     datasets: [{ 
      label: 'dataset', 
      data: [30, 50, 20], 
      backgroundColor: [ 
      'rgb(153, 102, 255)', 
      'rgb(255, 205, 86)', 
      'rgb(54, 162, 235)' 
      ], 
     }], 
    } 
}) 

Answer 1

आप अपने चार्ट विकल्प टूलटिप 'नीचे की स्थिति में रों कैरट हमेशा प्रदर्शित करने के लिए टूलटिप्स के लिए bottom को yAlign गुण सेट कर सकते हैं ... है

options: { 
    tooltips: { 
     yAlign: 'bottom' 
    } 
} 

ᴅᴇᴍᴏ

var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
      label: 'dataset', 
 
      data: [30, 50, 20], 
 
      backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)'] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     tooltips: { 
 
      yAlign: 'bottom' 
 
     } 
 
    } 
 
});

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

Answer 2

आप yAligntooltips configuration विकल्प के लिए "नीचे" सेट करके ऐसा कर सकते हैं:

options: { 
    tooltips: { 
     yAlign: "bottom" 
    } 
} 

JSFiddle डेमो: https://jsfiddle.net/tksr7bn9/

Answer 3

टूलटिप अनुकूलित करने के लिए तरीके के बहुत सारे। कोडपेन के माध्यम से यहां एक अच्छा उदाहरण है।

https://codepen.io/mab213/pen/PZOXdE

customTooltips: function(tooltip) { 
 
    // Tooltip Element 
 
    var tooltipEl = $('#chartjs-tooltip'); 
 
    // Hide if no tooltip 
 
    if (!tooltip) { 
 
    tooltipEl.css({ 
 
     opacity: 1 
 
    }); 
 
    return; 
 
    } 
 
    // Set caret Position 
 
    tooltipEl.removeClass('above below'); 
 
    tooltipEl.addClass(tooltip.yAlign); 
 
    tooltipEl.addClass(tooltip.xAlign); 
 
    // Set Text 
 
    tooltipEl.html(tooltip.text); 
 
    // Find Y Location on page 
 
    var top; 
 
    if (tooltip.yAlign == 'above') { 
 
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; 
 
    } else { 
 
    top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; 
 
    } 
 
    // Display, position, and set styles for font 
 
    tooltipEl.css({ 
 
    opacity: 1, 
 
    left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
 
    top: tooltip.chart.canvas.offsetTop + top + 'px', 
 
    fontFamily: tooltip.fontFamily, 
 
    fontSize: tooltip.fontSize, 
 
    fontStyle: tooltip.fontStyle, 
 
    xOffset: tooltip.xOffset, 
 
    }); 
 
}