图表 JS 工具提示标签间隔为 spaceBetween

时间:2021-02-22 22:05:07

标签: javascript charts tooltip

我有一个堆叠条形图,其中工具提示显示 Label: $value & 我希望将其设置为空格,以便 Label 向左对齐 & $value 向右对齐,允许所有数值对齐。例如:

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

这是计算器。只需按下复合按钮即可显示图表。

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"
    },
  }

0 个答案:

没有答案
相关问题