Chart.js line chart looking as area chart with smooth lines but not sharp - chart.js

Question

The chartjs line chart is showing like an area chart and with smooth lines. I want to make the chart a simple line chart with sharp points. I have tried some options but all in vain.
var AreaChart = new Chart(AreaCharts, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Required',
data: [],
backgroundColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
},
{
label: '2nd',
data: [],
backgroundColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
},
},
});
This is the code. I am filling up the data and the labels from other function.
The line should be sharp and there should be just the line not any area. I did read the documentation but it is confusing for me.

Answer 1

I have posted a solution here: http://jsfiddle.net/srux4971/
Most important parts are
data: {
...
datasets: [{
...
fill: false, //no fill
lineTension:0, //straight lines

Answer 2

In order to convert the area chart into a line chart, add the option fill: false to each dataset.
I you also define the option borderColor, the lines will appear with the desired color.
Please take a look at your amended code and see how it works.
new Chart('myChart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'Required',
data: [3, 2, 4, 5, 6, 4, 3],
backgroundColor: '#f39233',
borderColor: '#f39233',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
},
{
label: '2nd',
data: [4, 1, 3, 5, 3, 4, 2],
backgroundColor: '#b8de6f',
borderColor: '#b8de6f',
hoverBorderWidth: 2,
hoverBorderColor: '#054564',
fill: false
}
]
},
options: {
bezierCurve: false,
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: true,
padding: 10,
fontSize: 10
}
}]
},
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: ''
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>