How to useCubic Interpolation in Chart.js
In this approach, we are using Cubic Interpolation to control the type of interpolation between data points. We have added a button, that allows the user to switch between curves to straight lines) with a single click.
Syntax:
cubicInterpolationMode: 'linear'
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > < title >Example 2</ title > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Approach 2: Using Cubic Interpolation </ h3 > < button onclick = "straightFn()" > Toggle Interpolation </ button > < canvas id = "chart2" width = "400" height = "200" > </ canvas > </ center > < script > let useCurves = true; const data = { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Website Visitors', data: [5000, 6000, 5500, 7000, 8000], borderColor: 'green', cubicInterpolationMode: useCurves ? 'monotone' : 'linear', fill: false }] }; const config = { type: 'line', data: data, }; const ctx = document. getElementById('chart2').getContext('2d'); const chart2 = new Chart(ctx, config); function straightFn() { useCurves = !useCurves; chart2.data.datasets[0].cubicInterpolationMode = useCurves ? 'monotone' : 'linear'; chart2.update(); } </ script > </ body > </ html > |
Output:
How to Get Straight Lines Instead of Curves in Chart.js ?
In this article, we will see how we can represent the data on a Line chart in Straight Lines instead of having curves while representation. We will see two different practical approaches with the user interactive examples and their outputs.
Table of Content
- Using tension Property
- Using Cubic Interpolation
Chart.js CDN Link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>