How to add colored points with white shadow border in chart.js?

Question

trying to add colored points with white shadow border in React chart.js Version: 2.7.2 but no luck please any help.

what I have now

my code:

   <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>

what I'm trying to do

this chart with chart.js Version: 2.6.0 is the chart css different between this two versions?

Hi Fadi, did you find a way around it, I am trying to do the same thing? — Abhishek Soni, Sep 12 '21 at 15:33
Okay, no problem, I have custom-drawn it on canvas now, and thanks a lot for replying, means a lot! — Abhishek Soni, Sep 15 '21 at 06:05

score 0 · Answer 1 · answered Sep 26 '18 at 20:04

0

If you just want to remove border from point then you add pointBorderWidth: 0, and just remove pointBorderColor: 'rgba(0,0,0,.2)',

answered Sep 26 '18 at 20:04

mukeshmandiwal

244
2
6

hi, i don't want to remove the border i need a white border and around it a black shadow like in the second image – Fadi Sep 26 '18 at 20:07

How to add colored points with white shadow border in chart.js?

1 Answers1