Search code examples
chart.jsnode-red

ChartJS not showing the title

The ChartJS is not showing any title. I added the title in option and then plugin, Ieven tried to add some margin because mabe it was hidden by the layout but nothing works. I use node-red to launch the graphic dashboard. I added some CSS to the dashboard but nothing linked directly to the title. Any idea ?

<script>


var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900','#755800']

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Difference between temp ext and temp in',
                color:"#000000"
            }
        },

        scales: {
            yAxes: [
                {
                    gridLines :{color:"#ffffff"},
                    id: 'left-y-axis',
                    type: 'linear',
                    position: 'left',
                    ticks: {
                        fontColor: linecolors[0]
                    }
                },
                {
                    gridLines :{zeroLineColor:"#ffffff",color:"#000000",lineWidth:0.1},
                    id: 'right-y-axis',
                    type: 'linear',
                    position: 'right',
                    ticks: {
                        fontColor:linecolors[1]
                    }
                }
            ],
            xAxes: [
                {
                    gridLines :{zeroLineColor:"#000000",color:"#000000",lineWidth:0.1},
                    type: 'time',
                    distribution: 'series',
                    ticks: {
                        color:'#000000'
                    }
                }
            ]
        }
        
    },
    // The data for our dataset
    data: {
        labels: [],
        
        datasets: [
            {
                label: 'First',
         
                backgroundColor: linecolors[0],
                borderColor: linecolors[0],
                data: {{{payload.first}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,
            
                
            },
            {
                label: 'Second',
             
                backgroundColor: linecolors[1],
                borderColor: linecolors[1],
                data: {{{payload.second}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,
            
              
            },
            {
                label: 'Third',
         
                backgroundColor: linecolors[2],
                borderColor: linecolors[2],
                data: {{{payload.third}}},
                yAxisID: 'right-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,
         
              
            }
        ]
    },
    
    
});


</script>

enter image description here

Solution

  • You need to set the title in the root of the options, not in the plugins namespace:

    var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Title text'
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
    <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>