Tick color dynamic not working - ChartJs + QuickChart

22 Views Asked by At

I am trying to set the color of the y ticks in my chart js dynamicaly, but facing some issues with the quickchart api. In charts directly it works, but using quickchart it throws an error:

this is what i'm trying to do:

{
      type: "line",
      data: {
          labels: ['A', 'B'],
          datasets: [
              {
                  label: "Previsto Acumulado",
                  backgroundColor: "rgba(0,112,192,1)",
                  borderColor: "rgba(0,112,192,1)",
                  borderWidth: 1,
                  data: [90, 100],
              },
              {
                  label: "Realizado Acumulado",
                  backgroundColor: "rgba(0,176,80,1)",
                  borderColor: "rgba(0,176,80,1)",
                  borderWidth: 1,
                  data: [70, 20],
              },
          ],
      },
      options: {
          scales: {
              y: {
                  beginAtZero: true,
                  max: (context) =>{
                    var meta = context.chart.data.datasets[0].data
                    var real = context.chart.data.datasets[1].data
                    var max_bar_value = Math.max(...[Math.max(...meta), Math.max(...real)])
                    return Math.ceil( 1.2*max_bar_value)
                },
                  ticks: {
                      callback: function (value) {
                          return value + "%";
                      },
                      font: {
                            weight: "bold",
                            size: 15,
                        },
                        color: (c)=>{c.tick.value > 100 ? 'white' : 'black'}
                  },
              },
              x: {
                beginAtZero: true,
                ticks: {
                    font: {
                        weight: "bold",
                        size: 15,
                    }
                },
            }
          },
          plugins: {
            datalabels: {
                anchor: 'end',
                align: 'end',
                color: (context)=> {
                  return context.dataset.backgroundColor
                  },
                offset: function(context) {
                    return context.dataset.label === 'Realizado Acumulado' ? 5 : 15;
                  },
                  font: {
                      weight: "bold",
                      size: '16'
                      },
                formatter: function(value) {
                    return (Math.round(value * 100) / 100).toFixed(2) + '%';
                },
            },
          },
      },
  }

the error is on the color: (c)=>{c.tick.value > 100 ? 'white' : 'black'} statement. I have no idea why it's broken, the error that chart js returns is 'TypeError: Cannot read properties of undefined (reading 'value')

I am using sandbox of quickcharts, here is the LINK just copy paste my code

Thanks

0

There are 0 best solutions below