locked
Chartjs y-axis-description greater then 10 display dots RRS feed

  • Question

  • User1126057398 posted

    I am trying to display (i) Activity Name with dots if Activity Name>10 (ii) On Hover y-axis label whole Activity Name will be displayed.

     Reference: https://stackoverflow.com/questions/44355320/chartjs-set-different-hover-text-than-x-axis-description

    Everything is done as told but still unable to get the required output. What can be the issue:

    var chart = new Chart(ctx, {
    type: 'horizontalBar', data:{datasets: [{ data: [204.55],label: "Calories", borderColor: "#3e95cd",backgroundColor: "#ffc266", scaleShowGridLines: false,showScale: false,fill: true}]},
    options: { tooltips: {yAlign: 'bottom',callbacks: {title: function () { return 'Home Activities - Feeding Animals'; }}},title: { display: true}, legend: {position: 'bottom'},
    scales: { xAxes: [{gridLines: {display:false}, ticks:{min:0,suggestedMax :210.00,beginAtZero:true}}],
    yAxes: [
    {
    ticks: {callback: function(t) {var maxLabelLength = 10;if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';else return t;}},
    gridLines:{display:false},barPercentage: 0.2,scaleLabel: {display: true,labelString: 'Home Activities - Feeding Animals with Monkey testing'}}]}}
    });

    Friday, June 5, 2020 6:47 AM

All replies

  • User1126057398 posted

    I had done point  (i) Activity Name with dots if Activity Name>10 by defining a string variable like below. Does any one knows property in ChartJS to do (ii) point

    private void CreateChart(string productName, int productNo, decimal xAxisMaxValue)
    {
    String chart = string.Empty; int maxChars=35;
    string truncatedPN = (productName.Length <= maxChars) ? productName : productName.Substring(0, maxChars) + "...";
    // You can change your chart height by modify height value
    if (productNo == (int)CommonEnum.NumberAlphabets.One)
    {
    chart = "<canvas id=\"chart-canvaspn1\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn1\"),{type: 'horizontalBar', data:{";
    }
    else
    {
    chart = "<canvas id=\"chart-canvaspn2\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn2\"),{type: 'horizontalBar', data:{";
    }
    chart += "datasets: [{ data: [";

    // put data from database to chart
    String value = string.Empty;
    //for (int i = (int)CommonEnum.NumberAlphabets.Zero; i < tb.Rows.Count; i++)
    var ss = lstCompActivities.FirstOrDefault(a => a.CompareOn == "Calories Burn/Hour");
    value += (productNo == (int)CommonEnum.NumberAlphabets.One) ? lstCompActivities.FirstOrDefault(a => a.CompareOn == "Calories Burn/Hour").FirstItem : lstCompActivities.FirstOrDefault(a => a.CompareOn == "Calories Burn/Hour").SecondItem;
    // value += (productNo == 1) ? lstCompActivities[1].FirstItem : lstCompActivities[1].SecondItem;
    // value = value.Substring(0, value.Length - 1);

    chart += value;

    chart += "],label: \"Calories\", borderColor: \"#3e95cd\",backgroundColor: \"#ffc266\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
    chart += "]},options: { tooltips: {yAlign: 'bottom',callbacks: {title: function () { return '" + productName + "'; }}},title: { display: true}, legend: {position: 'bottom'},";
    chart += "scales: { xAxes: [{gridLines: {display:false}, ticks:{min:0,suggestedMax :" + xAxisMaxValue + ",beginAtZero:true}}], ";
    chart += "yAxes: [{gridLines:{display:false},barPercentage: 0.2,scaleLabel: {display: true,labelString: '" + truncatedPN + "'}}]}}"; // Chart title -ticks: autoSkip: false,maxRotation: 90, minRotation: 90
    // chart += "yAxes: [{ ticks: {callback: function(t) {var maxLabelLength = 20;if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';else return t;}},gridLines:{display:false},barPercentage: 0.2,scaleLabel: {display: true,labelString: '" + productName + "'}}]}}"; // Chart title -ticks: autoSkip: false,maxRotation: 90, minRotation: 90
    chart += "});";
    chart += "</script>";

    if (productNo == (int)CommonEnum.NumberAlphabets.One)
    ltChartFirstItemCalorieBurn.Text = chart;
    else
    ltChartSecondItemCalorieBurn.Text = chart;
    }

    Friday, June 5, 2020 9:10 AM
  • User1126057398 posted

    I want something like when one hovers over the label( labels are truncated with a triple-dot ), it will display full text of the truncated label like as displayed in link. But I want to do it for ChartJS.

    https://codepen.io/team/amcharts/pen/NBWrWG

    https://www.amcharts.com/docs/v4/tutorials/wrapping-and-truncating-axis-labels/

    Friday, June 5, 2020 1:03 PM
  • User1126057398 posted

    Any Suggestions......cry

    Thursday, June 11, 2020 4:07 AM