Блог

У меня есть столбчатая диаграмма со стеком, где во всплывающей подсказке отображается метка: $value amp; Я бы хотел, чтобы это было задано как пробел, поэтому метка выровнена по левому краю, а $value выровнен по правому краю, что позволяет выровнять все числовые значения. Например:

 Label 1:     $10,000
Label 2:     $50,000
Label 3:    $100,000
 

Вот калькулятор. Просто нажмите кнопку compound, чтобы отобразить диаграмму.

https://youthful-euclid-784d05.netlify.app

Параметры ChartJS:

     // Configuration options go here
  options: {
    responsive: true,
    maintainAspectRatio: true,
    legend: {
      display: true,
      position: "bottom"
    },
    scales: {
      xAxes: [{
        ticks: {
          fontSize: 16,
          fontFamily: "Roboto Condensed"
        },
        
        gridLines: {
          display: false,
        },
        scaleLabel: {
          display: true,
          labelString: 'Year',
          fontSize: 16,
          fontFamily: "Roboto Condensed"
        },
        stacked: true,
      }],

      yAxes: [{

        
        stacked: true,
        ticks: {
          maxTicksLimit: 5,
          beginAtZero: true,
          fontSize: 12,
          fontFamily: "Roboto Condensed",
          
        
          callback: function (value, index, values) {
            if (parseInt(value) >= 1000) {
              return (
                numeral(value).format("$0a")
                // "$"   value.toString().replace(/B(?=(d{3}) (?!d))/g, ",")
              );
            } else {
              // return "$"   value;
            }
          },
        },
      }, ],
    },
    legend: {
      display: true,
      labels : {
          fontSize: 14,
          fontFamily: "Roboto Condensed",
         
      },
      
    },
    chart: {

    },
    tooltips: {
      // displayColors: false,
      yAlign: "bottom",

      callbacks: {
        title: function (tooltip, data) {
          return `After ${tooltip[0].label} Years`;
          },

                    label: function(tooltipItems, data) { 
                        return `    ${data.datasets[tooltipItems.datasetIndex].label}:  ${formatCurrency(tooltipItems.value)}`;
                    },
                    
                      },
      
          // bodyAlign: "center",
          titleFontSize: 15,
          titleMarginBottom: 10,
          bodySpacing: 10,
          bodyFontSize: 12,
          mode: "x",
          xPadding: 10,
          yPadding: 10,
         
      // bodySpacing: "5"
    },
  }