score:303
solution for version 1 (old charts version)
according to documentation on chartjs.org
you can set the 'beziercurve' in options and pass it in when you create the chart.
beziercurve: false
eg:
var options = {
//boolean - whether the line is curved between points
beziercurve : false
};
var myline = new chart(document.getelementbyid("canvas").getcontext("2d")).line(linechartdata, options);
update for version 2
according to updated documentation for line configuration in global options
name type default description
tension number 0.4 default bezier curve tension. set to 0 for no bezier curves.
eg:
var options = {
elements: {
line: {
tension: 0
}
}
};
and also directly in the dataset structure by setting linetension
to 0 (zero).
property type usage
linetension number bezier curve tension of the line. set to 0 to draw straightlines.
this option is ignored if monotone cubic interpolation is used.
note this was renamed from 'tension' but the old name still works.
an example data object using these attributes is shown below.
var linechartdata = {
labels: labels,
datasets: [
{
label: "my first dataset",
linetension: 0,
data: data,
}
]
};
score:2
i think it's been updated to linetension
. check the docs.
score:10
just to complete version compatibility and to add something to this nice thread here:
still the same with chart.js
v3.x.x
(which is not backwards compatible with v2.x.x -- however, linetension
stays unchanged within
data: { datasets: [{ linetension: ...
)
linetension for chart.js
v3.x.x
following, you can run the snippet with 10 buttons to play with different linetensions (0 to 1) right here:
// for now, let's assume sample data
let sample_data = {
"labels" : [
"2021-08-02",
"2021-08-03",
"2021-08-04",
"2021-08-05",
"2021-08-06"
],
"values": [
6,
4,
3,
8,
2
]
};
// draw chart
const ctx = document.queryselector('canvas').getcontext('2d');
const mylinechart = new chart(ctx, {
type: 'line',
data: {
labels: sample_data.labels,
datasets: [{
label: 'linetension sample',
data: sample_data.values,
linetension: 0,
bordercolor: 'rgba(0,255,0,1)',
backgroundcolor: 'rgba(0,255,0,0.3)',
fill: true
}]
}
});
function linetension(event) {
// redraw the chart with modified linetension
// a bit of 'button-cosmetics' here
// enabling all buttons
document.queryselectorall('button').foreach(element => element.disabled = false);
// disabling the pressed button
event.target.disabled = true;
// setting programmatically the 'linetension' here
mylinechart.data.datasets[0].linetension = parsefloat(event.target.dataset.linetension);
mylinechart.update();
};
button {
color: blue;
}
button:disabled {
color: black;
background-color: rgba(0,255,0,0.3);
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of chart.js, now at v3.5.0 -->
<button onclick="linetension(event)" data-linetension="0" disabled>0</button>
<button onclick="linetension(event)" data-linetension="0.1">0.1</button>
<button onclick="linetension(event)" data-linetension="0.2">0.2</button>
<button onclick="linetension(event)" data-linetension="0.3">0.3</button>
<button onclick="linetension(event)" data-linetension="0.4">0.4</button>
<button onclick="linetension(event)" data-linetension="0.5">0.5</button>
<button onclick="linetension(event)" data-linetension="0.6">0.6</button>
<button onclick="linetension(event)" data-linetension="0.7">0.7</button>
<button onclick="linetension(event)" data-linetension="0.8">0.8</button>
<button onclick="linetension(event)" data-linetension="0.9">0.9</button>
<button onclick="linetension(event)" data-linetension="1">1</button>
<canvas width="320" height="240"></canvas>
score:13
i have used linetension to set the smoothness of the curve.
from the docs: linetension receives a number, bezier curve tension of the line. set to 0 to draw straight lines. this option is ignored if monotone cubic interpolation is used.
just make sure to test with different values how smooth you want the line.
for example:
var data = {
labels: ["jan", "feb", "mar"],
datasets: [{
label: "label 1",
linetension: 0.2
}, {
label: "stock b",
linetension: 0.2
}
]
};
score:72
you can use linetension option to set the desired curve. set 0 for straight lines. you can give a number between 0-1
data: {
datasets: [{
linetension: 0
}]
}
Source: stackoverflow.com
Related Query
- Chart.js : straight lines instead of curves
- chart js draw line chart by points instead of by lines
- Chart.js : straight lines and curves lines in the same graph
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How can I make two of my lines in Chart JS thicker
- Chart JS Fill Between two lines
- ChartJs bar chart - keep bars left instead of equally spread across the width
- How to display data labels outside in pie chart with lines in ionic
- charts.js straight lines - i cant find a solution
- ChartJS Radar Chart radar lines color?
- Find intersection between the chart lines in chartjs
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- Chart js logarithmic line chart showing NaN values instead of null
- Angular-chart / line chart with multiple horizontal lines (margins)
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- Chart x axis displays in timestamp instead of dates Chart.js
- How to Remove axis Lines from chart in chart js
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- change space between horizontal (grid) lines for line chart
- How to make lines in line charts from ng2-charts straight lines?
- Tooltips in Chart js are always black instead of the color of the corresponding dataset
- React JS Chart JS 2 is not hiding the grid lines in the background
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- Chart.js: Reverse bar chart with regular bars (Bottom to top instead of top to bottom)
- chart.js-plugin-annotations multiple horizontal lines in one chart
- Connect the dot vertically instead of horizontally on Line Chart
- Chart JS tooltip appears differently when set from script instead of html
- Chart JS stacked labels instead of making them horizontal
- How to display date instead of year in morris line chart in js
- Draw points and lines inside a bar in bar chart
More Query from same tag
- Using custom dataformat in chart.js for Multi Axis Line Chart
- How to set up a simple pie chart using React in ChartJS on codesandbox
- ChartJS re-rendering bug
- Can I use a gradient in Chart.js without accessing the chart context when the chart is created?
- Problem to create dynamic pie chart in ChartJS
- Implement a cash flow timeline
- Display with Month name in the Tooltip
- Chart from chart.js to pdf
- How to create a graph where the vertical axis (Y-axis) is a string?
- ChartJS incorrect plot when plotting multiple line charts in one graph
- Responsive legend font size in react-chartjs 2
- CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index
- charts.js straight lines - i cant find a solution
- Click on interactive chart.js bar chart and get value for labels and groups in JS
- Pie chart inside doughnut on same canvas
- Styling Bars and Lines with Chart.js
- How to add a ChartPoint to a DataSet in Chart.js with TypeScript?
- Angular-chart.js - Make line chart does not curve
- How to draw multiple lines in chart.js
- How to add comma in this chart js
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- how to create multiple chart on one component vue
- ChartJS executes a function multiple times
- remove undefined label in the upper part of a chart
- Error Message when using ChartJS with React
- ChartJS different background gradient depending on data (line graph)
- Series Details Not Showing in Angular Chart with Charts.js
- Svelte , pass data to chartjs from API
- Remove bullet points from chart.js legend
- How put dataset labels into multiTooltipTemplate?