Vue-chartjs: Can't turn off bezier curves in line chart.

[aido179]

Expected Behavior

Setting line tension to 0 should turn of bezier curves and render straight lines.

Actual Behavior

The line options are not impacting the rendered chart, so even with tension set to 0, the lines are still curved.

Here is the code I am using:

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          borderColor: '#f87979',
          fill: false,
          elements: {
            line: {
              tension: 0
            }
          },
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

Environment

• vue.js version: 2.5.17
• vue-chart.js version: 3.4.0
• npm version: 6.4.1

[apertureless]

Because you using it wrong.

You can either define the line-tension in a global scope or per dataset.

Dataaset

https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties

Its called lineTension

datasets: [
        {
          label: 'Data One',
          borderColor: '#f87979',
          fill: false,
          lineTension: 0,
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]

Global

Or if you want to define it globally
https://www.chartjs.org/docs/latest/configuration/elements.html#line-configuration

Chart.defaults.global.elements.line.tension = 0;

[aido179]

Thanks.

For the record, I also got it working this way:

this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'CPU usage',
          borderColor: '#f87979',
          fill: false,
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ],

    },
    {
      responsive: true, maintainAspectRatio: false,
      elements: {
        line: {
          tension: 0
        }
      },
    })

[apertureless]

Oh yeah, you can pass the global options into your local options, too.
Thats right :)

Glad you got it working.

👍