3

I have the following code to make a chart with chart.js but the main and axis title just does not work. Also I have put the legend to the bottom but does not work. Can anybody tell why it is not working?

let dataSize = 30;
let readings = new Array(dataSize);

const data = {
  // X axis labels
  labels: new Array(dataSize),
  datasets: [{
    //label: 'My Input',  // chart label
    data: readings,         // the data to chart
    //borderColor: '#272323', // line color (lavender)
    backgroundColor: 'rgba(123, 83, 252, 80)',
    borderColor: "rgba(255, 0, 0,1)",
    borderWidth: 1.2,
    pointBorderColor: "rgba(255, 0, 0, 1)",
    pointRadius: 0.2         // point size
  }]
};

const config = {
  type: 'line',         // type of chart
  data: data,           // the data
  options: {
    animation: false,   // remove animation to speed drawing up
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: 'Tarrif'
    },
    legend:{
      position: 'bottom'
    },
    scales: {           // axis ranges:
      y: {
        //type: 'linear',
        scaleLabel: {
        display: true,
        labelString: 'X axis Title'
      },
        min: 0,
        max: 260,
        gridLines: {
        display: true,
        drawBorder: false //hide the chart edge line
      }
      },
      
      x:[{
          gridLines: {
          display: false
          },
           scaleLabel: {
        display: true,
        labelString: 'X axis Title'
          },
          min:0
      }]
    }
  }
};

Below is screenshot of my graph:

enter image description here

I followed the advice here: In Chart.js set chart title, name of x axis and y axis?

thanks

ee-diary
  • 61
  • 6

1 Answers1

3

First of all don't use an array for your X scales, all the scales need to be defined as objects. Second you are placing the options in the wrong part, it has to be configured in the title namespace like so:

scales: {
  y: {
    title: {
      display: true,
      text: 'yTitle'
    }
  },
 x: {
    title: {
      display: true,
      text: 'xTitle'
    }
  }
}
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • thank you, @LeeLenalee solved my problem, but the legend position:bottom as in the above code is still not working and to avoid any further confusion why did the code provided in the link above not work? – ee-diary Sep 24 '21 at 11:06
  • Title and legend are internal plugins and thus have to be configured in the plugins namespace, you are looking at an answer for V2 while there have been a few major breaking changes in V3. You can read all of them in the [migration guide](https://www.chartjs.org/docs/master/getting-started/v3-migration.html) you can also always go to the part of the docs that doesn't work and check the namespace so you know you putted your options in the correct spot – LeeLenalee Sep 24 '21 at 11:15
  • I can't believe [`options.scales[scaleId].title.display` is defaulted to `false`](https://www.chartjs.org/docs/latest/axes/labelling.html). Why? – M Imam Pratama Aug 19 '23 at 07:07