Showing annotation line based on condition

Question

I want to show the horizontal line on top of the bar based on some conditions.

As shown, in the figure, I want to show the horizontal line only till Tuesday, which means I want to display the line till the previous day only.

Please find my code below:

let daytarget = WeeklyData.map((y) => y.DayTarget);

var annotations = daytarget.reduce(function (acc, cur, i) {
    acc[`line${i}`] = {
      type: 'line',
      yMin: cur,
      yMax: cur,
      xMin: -0.15 + i,
      xMax: 0.15 + i,
      borderColor: 'white',
      borderWidth: 10,
    }            
    return acc;            
  }, {});

var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [
        {
            data: WeeklyData,
            backgroundColor: function (value, context) {   
                console.log(value.TotalActual)
                if (value.raw.TotalActual >= value.raw.DayTarget) {
                    return 'rgba(0, 154, 221, 1)';
                }
                else {
                    return 'rgba(176, 35, 25, 1)';
                }
            }
                               
        }
    ],
};

Is it possible to give conditions for annotations? Appreciate your help!

Answer 1

To remove the horizontal line shown in the bar graph, you shouldn't provide the line (object) for the annotations object.

From what I see on your graph, the data for "Wed" onwards are with DayTarget and TotalActual are 0. You can manipulate the data by filtering the data with DayTarget greater than 0.

let daytarget = WeeklyData.filter((y) => y.DayTarget).map((y) => y.DayTarget);

Demo @ StackBlitz

This will be hard to manipulate the data by DayName. As comparing the value in string and your start day is Saturday. If today is Saturday, what's the data look like?

Unless your data provides the date value, then you can filter those data that are before today's date.

let today = new Date(new Date().toDateString());

let daytarget = WeeklyData.filter((y) => y.Date < today)
  .map((y) => y.DayTarget);