2

Is it possible to make the legend box of dashed line in line chart to have no dashed border?

I read about generateLegend() and legendCallback but I can't understand how it works in react-chartjs-2 together with React functional component. Also, I'm not sure if they can be used to change the border style of legend.

This is my sample code:

import { Line } from "react-chartjs-2";

const LineChart = () => {
    const data = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: [
            {
                label: "Line 1", data: [10, 10, 20, 20, 30, 30]
            },
            {
                label: 'Line 2',
                borderDash: [15, 5],
                data: [20, 20, 20, 20, 20, 20],
            }],
    };

    const options = {
        legend: {
            position: legendPosition,
            align: legendAlign,
        }
    };

    return <Line data={data} options={options} />
};

This is sample of desired Line 1(red) and Line 2(grey dahsed) enter image description here

junior
  • 23
  • 1
  • 4

1 Answers1

1

You have to use borderWidth:0 so, please remove borderDash: [15, 5] and add borderWidth: 0,. Or you can completely replace data with below:

const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
        {
            borderWidth: 0,
            label: "Line 1", data: [10, 10, 20, 20, 30, 30]
        },
        {
            label: 'Line 2',
            borderWidth: 0,
            data: [20, 20, 20, 20, 20, 20],
        }],
};

Update

You have to use borderWidth: 0 in data.datasets and this is mandatory for you requirement. Moreover, you can pass options={options} into Line to have more configuration for legend like legend background-color or legend font-color or legend boxWidth and so on.

Here is the Code Sandbox

Here is the output picture

enter image description here

Khabir
  • 5,370
  • 1
  • 21
  • 33
  • Thanks for helping. However, I can't use borderWidth: 0 because that will cause the line to be too thin and that's not the desired design. Also, I can't remove borderDash: [15, 5] as I need "Line 2 " to be dashed line. Do you have another way? – junior May 28 '20 at 01:43
  • Hi, I have added a picture that I got when I run project with borderWidth 0. Is this ok? – Khabir May 28 '20 at 09:37
  • Hi. I cannot use borderWidth:0 because the line is too thin, and I need to follow the design requirement. I have added a picture too. Not sure if you can see the legend box of Line 2 is having dashed border. I want it to be normal box like the one of Line 1 – junior May 28 '20 at 10:12
  • can you please share your full code so that I can reproduce your issue on my side? – Khabir May 28 '20 at 13:44
  • Here's the code in codepen [link](https://codepen.io/pw12/pen/RwWzJmb) though it's not working but you'll get the idea. Sorry, it's my first time coding in code pen and asking in stackoverflow. Hope it helps in reproducing at your side – junior May 29 '20 at 02:59
  • Hi, After running your code I am not getting any dashed line. Please check **Picture 2**. Also, Please try: https://codesandbox.io/s/zwxo5l6jvl?file=/src/LineDemo.js:249-790 may be it helps you – Khabir May 29 '20 at 08:38
  • I'm so sorry, I missed out some setting. I have fixed it. Please try again if you don't mind. If using the link you sent, you will see the dash by changing the value of borderDash to [15,5] – junior May 29 '20 at 15:18
  • great you have fixed it – Khabir May 29 '20 at 15:44
  • NO! Maybe I didn't make myself clear. Let me reiterate, I want a dashed line but I don't want the legend box to have dashed border. How to do that without using borderWidth:0 ? – junior May 30 '20 at 07:49
  • hi I have updated my answer. Please check **Update** section – Khabir May 30 '20 at 12:29