如何在chart.js中添加带有白色阴影边框的彩色点?

时间:2018-09-26 19:28:54

标签: javascript reactjs chart.js chartjs-2.6.0 react-chartjs

试图在React chart.js版本:2.7.2中添加带有白色阴影边框的彩色点,但是没有运气,请提供任何帮助。

我现在有什么

enter image description here

我的代码:

   <div  style={{height: '200px', width: '400px', position: 'relative'}} className={'line-chart'}>


                <Line data={{
                    labels: ["May 09", "May 15", "May 29", "Jun 03"],
                    datasets: [{
                        data: [
                            {
                                x: "May 09",
                                y: 80,
                            },
                            {
                                x: "May 15",
                                y: 98
                            },
                            {
                                x: "May 29",
                                y: 90
                            },
                            {
                                x: "Jun 03",
                                y: 110
                            },
                        ],
                        pointBackgroundColor: ["#f7aa2e", "#05b9af", "#ee734e", "#ee734e"],
                        pointBorderColor: 'rgba(0,0,0,.2)',
                        pointBorderWidth: 3,
                        pointRadius: 4,
                        pointHoverRadius: 5,
                        lineTension: 0,
                        borderWidth: 1,
                        fill: false,
                    }]
                }}
                      options={{
                          legend: {
                              display: false
                          },
                          responsive: true,
                          // maintainAspectRatio: false,
                          scales: {
                              yAxes: [{
                                  display: false
                              }],
                              xAxes: [{
                                  type: 'category',
                                  gridLines: {
                                      display: false
                                  }
                              }]
                          },
                          tooltips: {
                              enabled: false,
                          }

                      }}
                />

            </div>

我要做什么

enter image description here

此带有chart.js版本的图表:2.6.0这两个版本之间的图表CSS不同吗?

1 个答案:

答案 0 :(得分:0)

如果只想从点删除边框,则添加pointBorderWidth: 0,并仅删除pointBorderColor: 'rgba(0,0,0,.2)',