Lovelace - graph-chartjs-card

This is higly customizable graph card for Home-Assistant's Lovelace UI.

Graph ChartJS Chart Version 2.1.5 for Home Assistant - Visualize your data in different ways- BAR, HORIZONTALBAR ,SEGMENTEDBAR, PIE, DOUGHNUT, LINE,RADAR,SCATTR,BUBBLE - ; each of them animated and customisable. Respects the set Homeassistant locale for numbers and dates.

It is based on chart.js and offers most of the features of the library - datasource home-assitant history or influx database queries.

If you find any information on this page useful, feel free to buy me a coffee:

---

Installation

Manual install

1. Download the latest release, unzip and copy the folder chart-card into your config/www/community directory or download the latest main version from https://github.com/zibous/lovelace-graph-chart-card/tree/main/dist/chart-card (all files) to the config/www/community directory.

2. 
   

3. Add a reference to chart-card-min.js inside your ui-lovelace.yaml or at the top of the raw config editor UI:

   resources:
     - url: /hacsfiles/chart-card/chart-card-min.js
       type: module

   
   

   You can see all the ways to use Lovelace - graph-chartjs-card in the usage documentation.

   
   

YAML Structure for custom:chart-card

## -------------------------------------
## all settings for a custom-chart-card
## -------------------------------------
- type: 'custom:chart-card'
  ## all for the card
  title: '{text: card-titel}'
  icon: '{text: card-title-icon}'
  height: {height-chard: number}px
  chart: '{chart-type: line|radar|bar|horizontalBar|pie|doughnut|polarArea|bubble|scatter}'
  ## optional settings for chart
  showstate: {boolean: true|false}
  debug: {boolean: true|false}
  cardtimestamp: {boolean: true|false}
  showdetails:
    title: '{text: titel}'
    title_sensor: '{text: table-header sensor}'
    title_mean: '{text: table-header mean value}'
    title_min: '{text: table-header min value}'
    title_max: '{text: table-header max value}'
    title_current: '{text: table-header current value}'
    title_timestamp: '{text: table-header timestamp}'
    visible: {boolean: true|false}
  loader: '{text: audio|ball-triangle|bars|circles|grid|hearts|'
           'oval|pfuff|rings|spinning-circles|tail-spin|three-dots}'
  update_interval: {integer: secunds}     
  
  ## otional settings for data scales (time-series)
  datascales:
    range: {integer}
    unit: '{text: second|minute|hour|day|month|year}'
    format: '{text: dateformat pattern}'
    factor: {number: factor}
    ignoreZero: {boolean: true|false}
    aggregate: '{text: first|last|sum|mean|max|min|range|midrange}'
    mode: '{text: category|time}'
    
  ## optional chart.js options (see chart.js documentation) 
  chartOptions:
    plugins:
      legend:
        position: '{text: top|right|left|bottom}'
        display: {boolean: true|false}
    scales:
      x:
        alignToPixels: {boolean: true|false}
        stacked: {boolean: true|false}
        offset: {boolean: true|false}
        title:
          display: {boolean: true|false}
          text: '{text: axis-title}'
      'y':
        alignToPixels: {boolean: true|false}
        stacked: {boolean: true|false}
        title:
          display: {boolean: true|false}
          text: '{text: axis-title}'
          
  entities:
    ## optional options for all entities
    - options:
      unit: '{text: unit-text}'
      ignoreZero: {boolean: true|false} 
      
    - entity: '{text: entity-id}'
      ## optional settings for the current entity (1st)
      name: '{text: display-text}'
      attribute: '{text: entity-attribute-name}'
      unit: '{text: unit-text}'
      ignoreZero: {boolean: true|false}
      aggregate: '{text: first|last|sum|mean|max|min}'
      style: ## see chart.js documentation
        backgroundColor: '{text: HEX|RGB|RGBA color}'
        
    - entity: '{text: entity-id}'
      ## optional settings for the current entity (2nd)
      name: '{text: display-text}'
      attribute: '{text: entity-attribute-name}'
      factor: {number: factor}
      aggregate: '{text: first|last|sum|mean|max|min}'
      style: ## see chart.js documentation
        backgroundColor: '{text: HEX|RGB|RGBA color}'
        
    ## optional influxdb datasource    
    - entity: '{text: entity-id}'
      dataid: '{text: unique id}'
      datasource:        
        influxdb: '{text: influxdb connection}'
        query: '{text: influxdb SQL statement}'
        token: '{text: btoa(user:passwort)}'        

For chartOptions and entity.style, see: Chart.js documentation

Creating a Chart

It's easy to get started with Lovelace - graph-chartjs-card. All that's required is the libraries included in your Home-assistant installation to render the charts.

In this example, we create a bar chart for a two dataset and render that in the lovelace page. Data source, read weight measurements from Xiaomi Body Scales....

YAML Configuration

- type: 'custom:chart-card'
  title: 'Makro Nährstoffe'
  icon: 'mdi:nutrition'
  chart: 'bar'
  chartOptions:
    plugins:
      title:
        display: true
        text: 'Aufteilung Nährstoffe (kal) pro Tag'
        color: '#ff9500'
  entities:
    - entity: sensor.eiweis_makronahrstoff
      name: Eiweis
    - entity: sensor.fett_makronahrstoff
      name: Fett
    - entity: sensor.kohlenhydrate_makronahrstoff
      name: Kohlenhydrate

You can see all the ways to use Lovelace - graph-chartjs-card in the usage documentation.

Helper

• YAML to JSON Online - Use this online tool to convert YAML into JSON.
• JSON to YAML Online - Use this online tool to convert JSON into YAML.

Resources

• Chart.js v3 - Chart.js - Simple yet flexible JavaScript charting for designers & developers
• Chart.js Official Guide - The user guide and documentation site.
• Chart.js Samples - Simple yet flexible JavaScript charting for designers & developers
• Colors with Chart.js & D3's - Automatically Generate Chart Colors with Chart.js & D3's Color Scales...
• SVG Loaders - SVG-Loaders...
• Colors Wall - Place to store your color Palettes
• UI gradients - uiGradients - Beautiful colored gradients

---

Credits

• Evert Timberg - Maintainer of @chartjs

• Jukka Kurkela - Maintainer of @chartjs & Plugins for chartjs

• sdelliot - Lovelace Pie Chart Card

• cheelio - Lovelace power usage graph card

License

graph-chartjs-card is available under the MIT license.