[Chartjs]-How to skip labels of a line in multiline graph in chartjs?

by

4👍

✅

You must not define data.labels, because they are considered for both datasets. Instead, you should define each data point individually using an object containing x and y properties.

data: [
  { x: '2020-02-24', y: 900 }, 
  { x: '2020-03-24', y: 600 }
]

In the following runnable code snippet, I build such data of individual datasets out of your base data array using filter() and map().

const data = [
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-15', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-25', type: 'expense', amount: 50 },
  { date: '2020-03-28', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'income', amount: 600 }
];

var worldChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: data.filter(o => o.type == 'expense').map(o => ({ x: o.date, y: o.amount }))
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: data.filter(o => o.type == 'income').map(o => ({ x: o.date, y: o.amount }))
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'        
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

0👍

 const options = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { title: { display: false, }, ticks: { color: "black", }, },
        x: { ticks: { color: "black", autoSkip: true, }, grid: { display: false, } },
      },
      plugins: { legend: { display: false, }, title: { display: false, }, tooltip: { mode: "index", intersect: false, }, },
      hover: { mode: "nearest", intersect: false, },
    };


const data={{
              labels: chartData?.labels,
              datasets: [{ label: "Orders", type: "bar", barThickness: 12, borderRadius: 20, data: chartData?.data, backgroundColor: "#fb6340", },],
            }}

Leave a comment