如何在图表区域和图表线之间添加边距?

时间:2020-10-18 10:26:22

标签: reactjs chart.js react-chartjs

我正在使用图表js,并制作了折线图。我已经尝试了多种方法并仔细阅读了整个文档,但是找不到解决方法。 我尝试使用渐变在图表区域背景和线条之间带来一些空白。 我是否需要为此插件做一个插件?我需要在线条和图表区域背景之间添加空白或空白。

function App() {
  var options = {
    // layout: {
    //   padding: {
    //     left: 50,
    //     right: 0,
    //     // top: 100,
    //     bottom: 100
    //   }
    // },
    scales: {
      xAxes: [
        {
          gridLines: {
            drawOnChartArea: false,
            drawBorder: false
          },
          ticks: {
            display: false
          }
        }
      ],
      yAxes: [
        {
          gridLines: {
            drawOnChartArea: false,
            drawBorder: false
          },
          ticks: {
            display: false
          }
        }
      ]
    },
    maintainAspectRatio: false,
  };
  const data = canvas => {
    const ctx = canvas.getContext("2d");
    const gradient = ctx.createLinearGradient(0, 49, 0, 500);
    // gradient.addColorStop(0.6, "white");    
    gradient.addColorStop(0.21, "rgba(226,240,251,1)");
    gradient.addColorStop(0.54, "rgba(244,249,253,1)");
    gradient.addColorStop(0.8, "rgba(251,253,254,1)");

    return {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          lineTension: 0.5,
          fill:true,
          backgroundColor: gradient,
          borderColor: "#347aeb",
          borderCapStyle: "butt",
          borderDash: [],
          borderWidth: 5,
          borderDashOffset: 0.0,
          borderJoinStyle: "round",
          pointBorderColor: "#347AEB",
          pointBackgroundColor: "white",
          pointBorderWidth: 5,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "white",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 10,
          pointHitRadius: 10,

          // showLine: 0,
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };
  };

  return (

    
      <Line data={data} width={100} height={400} options={options}></Line>

  );
}


I need to add a margin where I have pointed it out.

0 个答案:

没有答案
相关问题