0

i have a line chart of chart js and it's like this: 

this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
    datasets: [
      {
        label: '',
        fill: false,
        lineTension: 0.1,
        backgroundColor: "steelblue",
        borderColor: "steelblue",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "steelblue",
        pointBackgroundColor: "steelblue",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "steelblue",
        pointHoverBorderColor: "steelblue",
        pointHoverBorderWidth: 2,
        pointRadius: 2,
        pointHitRadius: 10,
        data: [40, 59, 46, 50, 56, 52, 40, 58, 29, 46, 36, 36, 45, 31, 19, 24, 26, 12, 30, 32, 31, 42, 37, 50, 34, 39, 28, 26, 33, 21],
      }
    ]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
    },
  }
});

}

when I run it, it shows all the labels on x-axes. but I want to show only label 1, 15, 30! I used to set other labels to "" but in this way, the tooltip doesn't show the x-axis data! what should I do now? and I have another problem that is the label top of the chart. I set legends: {display: false} in options but the table won't be shown anymore

fariba.j
  • 1,737
  • 7
  • 23
  • 42
  • Possible duplicate of [Show only nth tick LINE on x-axis for Chart.js diagram](https://stackoverflow.com/questions/44361991/show-only-nth-tick-line-on-x-axis-for-chart-js-diagram) – Carol Skelly Sep 03 '18 at 12:06

1 Answers1

1

You can define a userCallback function for the scales.xAxes option...

   xAxes: [{
        ticks: {
            userCallback: function(item, index) {
              if (index===0) return item;
              if (((index+1)%15)===0) return item;
            },
            autoSkip: false
        },
        gridLines: {
          display: false
        }
   }]...

To hide the "legend" (not "legends"), use:

legend: {
    display: false
}

Demo: https://www.codeply.com/go/5QI8eVTPnY

Similar: Show only nth tick LINE on x-axis for Chart.js diagram

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • @themes-guide the legend property is ok but when I use user callback function it returns an error that says types of property 'Scales' are not compatible! I'm using angular 6 and I don't know what's the problem – fariba.j Sep 02 '18 at 10:59
  • I don't know. "scales" is one of the chart.js options but perhaps it's different in whatever library you're using for Angular 6. Anyway, I've answered "how to show only each 15th x-labels". – Carol Skelly Sep 02 '18 at 11:06