Применить градиент к линейной диаграмме js Реакция - PullRequest
Новая
       5

Применить градиент к линейной диаграмме js Реакция

0 голосов
/ 13 апреля 2020

Я видел этот график в административной панели реагирования, и я хотел продублировать его, но градиент на линейном графике, как на рисунке ниже:

enter image description here

вот тот, который я сделал без градиентной части:

enter image description here

вот мой код: 

 <Line
          height={80}
          options={{
            legend: {
              display: false,
            },
            scales: {
              xAxes: [
                {
                  ticks: {
                    padding: 10,
                    fontColor: "#afafaf",
                  },
                  scaleLabel: {
                    padding: 150,
                  },
                  gridLines: {
                    color: "#f3f4ff",
                    offsetGridLines: true,
                  },
                },
              ],
              yAxes: [
                {
                  ticks: {
                    padding: 20,
                    fontColor: "#afafaf",
                    max: 80,
                    min: 0,
                  },
                  scaleLabel: {
                    padding: 150,
                  },
                  gridLines: {
                    display: false,
                  },
                },
              ],
            },
          }}
          data={{
            labels: ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC",
            ],
            datasets: [
              {
                label: "Scanned Codes",
                fill: "+2",
                lineTension: 0.4,
                backgroundColor: "#2ebcff",
                borderWidth: 2,
                borderColor: "#2ebcff",
                borderCapStyle: "butt",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: "miter",
                pointBorderColor: "#2ebcff",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 7,
                pointHoverRadius: 10,
                pointHoverBackgroundColor: "#2579f7",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 3,
                pointHitRadius: 10,
                data: [5,50,10,50,10,40,0,30,10,65,0,40,10,30],
              },
            ],
          }}
        />

пожалуйста, проверьте мой Код, если вы можете, пожалуйста, помогите мне применить градиент, как первое изображение на моем графике.

...