Points cut at half at the edges of top and bottom, at chartjs

Thanos Sakis

enter image description here

As showed in the picture the points are cut in half when reaching bottom or top edges (when the data is 1 or 5 in this example).

I tried padding, adding some 'fake' data to extend the limits of 1 and 5 and removing it with callback function on ticks. None worked as expected

This is my config for this chart.

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      //pointBackgroundColor: 'white',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
        },
      },
    },
  };

Removing min and max, results in the expected output. enter image description here

But I need min and max, cause I want fixed Y axes values

Any clues how to fix this?

LeeLenalee

You can use the afterDataLimits hook to set the max and min of the scale, that way it still overflows the chart area:

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 10, 2, 3],
      borderColor: 'pink',
      backgroundColor: 'pink',
      radius: 10
    }]
  },
  options: {
    scales: {
      y: {
        afterDataLimits: (scale) => {
          scale.max = 10;
          scale.min = 0;
        }
      },
    },
  },
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ChartJS Line chart cut off at the top and bottom

UIScreenEdgePanGestureRecognizer: top and bottom edges

android bottom sheet with curved top edges

Half colored border on top and bottom using CSS

chartjs - top and bottom padding of a chart area

ChartJs - Double tooltip Top and Bottom on hover

How to split an html page to where clicking a link on the top half will open it on the bottom half, not affecting the top half at all

How to cut a rectangle from the top and bottom of an image?

Border top and bottom without triangle cut

Top half of every letter (all text) cut off

Why does my background stretch to the edges on the top of the page, but not on the bottom?

Div with border and top/right, bottom/left transparent edges

Create linear gradient border for top and bottom edges only?

HTML CSS - Making top bar and bottom bar reach the edges

Plot larger points on bottom and smaller on top

How to show half of the middle section when scrolled to the top and bottom of the page?

How to maximize window top/bottom half screen in Gnome?

Any shortcut to resize a window to half top/bottom of screen?

How to create a layout with rounded corners on only the top or bottom half?

How to cut/hide projected area from bottom and top of GLControl - openTK

Move Top cut corner to bottom using linear-gradient

how to cut black area on top and bottom of the HTML5 video?

Images are getting cut from the top as they are placed more to the bottom

Android Compose - Why is drawText in Canvas being cut off at bottom but not at top?

Why does the top half of the span element cover the text and the bottom half does not

Rectangle with two cut edges

How to align two divs underneath each other? (Top div is being cut in half)

Cut shapes to half Swiftui

PowerShell cut string in half