How to cut line graph in ChartJS

Jonjie Published at Dev

Jonjie

I'm trying to cut the line graph to its specific data but still want to show the labels below. Please see the screenshot.

How can I remove or cut the line with the red indicator without removing the 09 Aug?

I've added this line, lineTension: .10, but I think this is only to specify how the line curves. Any idea for this? I've already searched over the internet but unfortunately didn't find an answer.

timclutton

If by "cut" you mean "remove" (don't draw) then you simply need to pass null as the value, e.g.:

data: [10159, 10152, 43149, 43149, null]

As you haven't provided your code I can't correct it, so here's a rough working example:

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ["05 Aug", "06 Aug", "07 Aug", "08 Aug", "09 Aug"],
    datasets: [{
      data: [10159, 10152, 43149, 43149, null],
      fill: false,
      lineTension: .1
    }]
  },
  options: {
    legend: {
      display: false
    },
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-8

Comments

0 comments

How to hide y axis line in ChartJs?

Chartjs line graph dataset with offset

ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip

How to cut line graph in ChartJS

How to cut line graph in ChartJS

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

Emulator wrong screen resolution in Android Studio 1.3

3D Touch Peek Swipe Like Mail

Double spacing in rmarkdown pdf

Svchost high CPU from Microsoft.BingWeather app errors

How to how increase/decrease compared to adjacent cell

Using Response.Redirect with Friendly URLS in ASP.NET

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

BigQuery - concatenate ignoring NULL

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Can a 32-bit antivirus program protect you from 64-bit threats

Make a B+ Tree concurrent thread safe

Bootstrap 5 Static Modal Still Closes when I Click Outside

Vector input in shiny R and then use it

Assembly definition can't resolve namespaces from external packages