I need some help on how to configure the bar diagram to show X axis properly

[henriknordgren]

I am trying to make a simple bar diagram for days, months and years. No interactivity, just simple bar diagrams.

I have spent better part of the day trying to figure out how this works, but I am getting more and more confused. Look att this simple diagram:

This is by month, so I want to show on x axis 01-31 or whatever range the current month has. The data is in the statistics database.

I use autorange, since It seems like the way to go. I have set some key properties such as:

• hours_to_show: current_month
• time_offset: ${parseInt(states['input_number.month_offset'].state) + 'M';}
• autoRange: true

With the above, I assumed that current month is this month (february) and offset -1M means January.
autoRange should then be 01-31 for X-axis since I set

• dtick: D1
• tickformat: "%d"

and

• type: bar
• statistic: state
• period: day

The results are very confusing. Here is when I just load it (with offset -1):

It stats at the third of january

And here is when I drag the diagram slightly to the left

Behold, there are the missing bars for 01 and 02!!!

Why doesn't the x axis start from 01 then? How can I modify the yaml below to make the x-axis show bars and ticks prperly for year (2025, 2024, 2023), month (Jan-Dec) and Day (01-31) ?

What is it that I have messed up here?

type: custom:config-template-card
      entities:
        - sensor.offset_template
        - input_number.month_offset
        - sensor.energy_graph_sensor_name
      card:
        type: custom:plotly-graph
        card_mod:
          
        hours_to_show: current_month
        time_offset: ${parseInt(states['input_number.month_offset'].state) + 'M';}
        layout:
          font:
            family: Amazon Ember Bold, sans-serif
            size: 14
            color: "#444444"
          plot_bgcolor: rgba(0,0,0,0)
          paper_bgcolor: rgba(0,0,0,0)
          showlegend: false
          width: 950
          height: 500
          yaxis:
            title: Usage (kWh)
          xaxis:
            showgrid: false
            dtick: D1
            tickformat: "%d"
            tickmode: linear
            tickangle: 0
            autoRange: true

        entities:
          - entity: ${states['sensor.energy_graph_sensor_name'].state}
            type: bar
            statistic: state
            period: day
            texttemplate: "%{y:.0f}"
            extend_to_present: false
            filters:
              - delta              
        refresh_interval: 30
        config:
          scrollZoom: false
          displayModeBar: false    

[henriknordgren]

OK here is another issue. When I first load the diagram for march

Then I drag the diagram slightly to the left, voila, the bars appear.

You can also see that for 01 of March, there is no value. It exists when I scroll up a bit. It is almost as if the bar diagrams dont fetch statistic data with the proper range/interval. It is only when I start dragging when new queryes are executed that the correct data appear. The Y axis is also not properly scaled, since the value for 01/03 is missing. As for why I just get a vertical line, beats me.

I use dynamic sensor names, and for some sensors that have a LOT of data back into 2024 it works right from the beginning. For sensors or utility meters with very little data, days, weeks, it behaves like this.

I am pretty sure that I am doing something wrong in my configuration. But I can't keep guessing how the plotly graph works. I would appreciate some assistans in how to troubleshoot this further. Maybe it is the component/configuration, maybe it is the data? I have no clue. I only know that it works sometimes... with some sensors. WHen I look in the ststistics database using plain SQL the data looks fine to me. You can also see that on the top left where I calculate cost and sum. That calculation is based on raw SQL and is 100% correct. It is the digram and it's method of fetching data that is wrong somehow....

thank you
Henrik

[dbuezas]

When you use the delta filter, at least two data points are needed. Filters happen after fetching, so the card doesn't know you'll need older data than what's in screen.

I suggest you add some extra slack to the left (e g via time offset)

[henriknordgren]

I really really appreciate you, taking time to answer my question and trying to help me out. I have now spent a few hours playing around with the different settings, and finally found something that works great.

First of all the "current_month" seems useless? WHen I removed it and set a static value, things improved a LOT. The settings that worked for me are these (for month) but same principle is for days, weeks, months as well:

hours_to_show: 31d
time_offset: ${parseInt(states['input_number.month_offset'].state) + 'm';}


 xaxis:  
            showgrid: false
            dtick: D1
            tickformat: '%d'
            tickmode: linear
            tickangle: 0           
            range:
              - |-
                ${() => {    
                  const offset = parseInt(states['input_number.month_offset'].state);
                    const currentDate = new Date();
                    
                    // Adjust the month based on the offset
                    currentDate.setMonth(currentDate.getMonth() + offset); 
                    
                    // Move to the last day of the previous month
                    currentDate.setDate(0); 
                    currentDate.setHours(10, 0, 0, 0); 
                    
                    // Format the date as "YYYY-MM-DD 10:00:00"
                    const result = currentDate.getFullYear() + '-' +
                                   String(currentDate.getMonth() + 1).padStart(2, '0') + '-' +
                                   String(currentDate.getDate()).padStart(2, '0') + ' 10:00:00';
                    
                    return result;

                  }
                }
              - |-
                ${() => { 
                   const offset = parseInt(states['input_number.month_offset'].state); // Get the offset
                  const currentDate = new Date();
                  
                  // Adjust the month based on the offset
                  currentDate.setMonth(currentDate.getMonth() + offset + 1); // Move to the next month
                  currentDate.setDate(0); // Move to the last day of the current month
                  currentDate.setHours(12, 59, 0, 0); // Set time to 12:59:00
                  
                  // Format the date as "YYYY-MM-DD 12:59:00"
                  const result = currentDate.getFullYear() + '-' +
                                 String(currentDate.getMonth() + 1).padStart(2, '0') + '-' +
                                 String(currentDate.getDate()).padStart(2, '0') + ' 12:59:00';
                  
                   return result;


                  }
                }

dont like to use the magic strings for time offsets, but it is needed to trim the visuals. I do wish that current_month did all this for me, but as long as it works, I dont mind.

thank you
Henrik

[dbuezas]

Happy to hear that!
You seem to be using some templating add-on. For others, $ex is the natively supported way