我放在折线图选项中的所有内容都不起作用

Question

As you can see i have a mixed chart, a bar chart with a line chart. i can change options of the bar chart that works perfectly fine, but when i try to put some options in the line chart it doenst work.

i already tried to merge the options and move the options around, nothing seems to work

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Javascript:

var myChart = document.getElementById("myChart");
function randomData() {
    return Math.random();
}
let barChart = new Chart(myChart, {
    type: 'bar',
    data: {
        labels: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5'],
        datasets: [
            {
                type: 'line',
                label: ['line data'],
                data: [randomData(), randomData(), randomData(), randomData(), randomData()],
                options:{
                    showLine: false,
                }
            },{
                label: ['bar data'],
                data: [randomData(), randomData(), randomData(), randomData(), randomData()],
                backgroundColor: [
                    'green',
                    'red',
                    'blue',
                    'purple',
                    'orange',
                ],
            }],
    },
    options: {
        title: {
            display: true,
            text: 'Test Chart met random nummers'
        },
        legend: {
            position: 'right',
        },
        responsive: true,
    },
});

I want to be able to change the options of the line chart, for example to show or hide the line or change the curves with bezierCurve.

Answer 1

As you can read in the documents about the line chart , showLine is a dataset property. You use it directly in your dataset , not under the options property.

datasets: [{
  type: 'line',
  label: 'Line data',
  data: [randomData(), randomData(), randomData(), randomData(), randomData()],
  showLine: false
}]

Almost all other options you use in the options property. tension for Bezier curves is one of them.

options:  {
  elements: {
    line: {
      tension: 0
    }
  }
}