Many Chart/Dataset Options Do Have Any Effect

[epalaima]

Hi, I have been trying to customize the look and feel of my charts using the options found in the chart.js documentation, but many of them do not have any effect. For example, I will pass something like

{
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "TheChart",
strokeColor: "rgba(220,220,220,1)",
fill: false,
data: rand(32, 100, 10)
}
]
}

To my test chart, but the area below the line will still be filled, even though I have set fill to false.

I have also been unable to disable tooltips. I tried to do this by passing the following to options:

{
tooltips: {
enabled: false,
backgroundColor: "rgba(0, 0, 0, 0)",
}
}

But I still get a tooltip.

Is there something I am doing wrong here, or are some of these chart options just not available in react?

[merlinstardust]

Can you wrap your code samples with backticks to make them easier to read? I might be able to see what is wrong then.

Also, your title is missing the word "not", which is confusing. You should probably fix that.

[darvid7]

Have a similar issue with fill: false in datasets not affecting the graph and neither did datasetFill: false in chartOptions.

Here is a workaround for making the area under the graph not be filled.

    const data = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'TheChart',
          fillColor: 'rgba(0,0,0,0)',
          strokeColor: 'rgba(220,220,220,1)',
          data: [100, 5, 2, 115, 50, 90, 80]
        }
      ]
    };

[janicheg]

@darvid7 thanks a lot!

[xmeltrut]

+1. I'm having similar issues. However, it could be the chart.js documentation. It is rather confusing trying to work through the different levels of properties they have and how they should be correctly nested. But I have this:

const options = {
    responsive: true,
    scales: {
        xAxes: [{
            ticks: {
                display: false,
                fontColor: 'blue',
                fontSize: 18
            }
        }]
    }
}

Which matches the example they have in their documentation. But has no effect.

I think I read in a separate issue that the docs are for chart.js v2 though, and maybe v1 is different? So maybe the options do work but we're setting the incorrect ones.

[ubermensh]

Options is not working. It is not about version of chart js. Useless component.

[Jareechang]

hi everyone, please refer to Chart.js version 1.1.1 Documentation.

The react-chartjs library on master currently only supports this version of Chart.js.

We're in the process of adding support for Chart.js 2.0.

If you want help out, please use the branch chartjs-v2 to test out, and issue bug tickets. I will try to fix it.

[lloyddugmore]

Hi @Jareechang
is there any timeframe on a resolution for this?

const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'My First dataset', fill: false, lineTension: 0.1, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65.22, 59.88, 80.47, 81.88, 56.77, 55.11, 40.0] } ], options: { scales: { yAxes: [{ ticks: { beginAtZero: true, stepSize: 2 } }] } }, };

and then show a line graph

<Line id="graph" data={data} />

None of the options are even considered...