score:-1
Accepted answer
you should add the property line: false
to your dataset.
for further details, please consult line dataset properties from chart.js documentation
score:1
in v3 of the lib this has become default behaviour, to achieve this in v2 you can do it in 2 ways, you can specify fill: false
in every dataset or you can do it in the options for the line like so:
options: {
elements: {
line: {
fill: false
}
},
}
example:
var labels = ["25\/04", "26\/04", "27\/04", "28\/04", "29\/04", "30\/04", "01\/05", "02\/05", "03\/05", "04\/05", "05\/05", "06\/05", "07\/05", "08\/05", "09\/05", "10\/05", "11\/05", "12\/05", "13\/05", "14\/05", "15\/05", "16\/05", "17\/05", "18\/05", "19\/05", "20\/05", "21\/05", "22\/05", "23\/05", "24\/05", "25\/05"];
var datasets = [{
"label": "formul\u00e1rio site",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"backgroundcolor": "#4dc9f6",
"bordercolor": "#4dc9f6"
}, {
"label": "whatsapp",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 24, 47, 24, 2, 4, 23, 0, 0, 0, 0, 0, 0, 0, 0],
"backgroundcolor": "#f67019",
"bordercolor": "#f67019"
}, {
"label": "facebook",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"backgroundcolor": "#f53794",
"bordercolor": "#f53794"
}, {
"label": "call tracking",
"data": [0, 27, 21, 11, 14, 20, 0, 0, 32, 22, 18, 28, 11, 0, 0, 16, 25, 22, 20, 23, 0, 0, 28, 0, 0, 0, 0, 0, 0, 0, 0],
"backgroundcolor": "#537bc4",
"bordercolor": "#537bc4"
}];
var uniqueid = '60acaa981f364';
var config = {
type: 'line',
data: {
labels: labels,
datasets: datasets
},
options: {
elements: {
line: {
fill: false
}
},
responsive: true,
title: {
display: true,
text: 'leads diários'
},
tooltips: {
mode: 'index',
intersect: true,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'dias'
}
}],
yaxes: [{
display: true,
ticks: {
beginatzero: true,
},
scalelabel: {
display: true,
labelstring: 'value'
}
}]
}
}
};
$(document).ready(function() {
var ctx = document.getelementbyid(uniqueid).getcontext('2d');
window.myline = new chart(ctx, config);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="60acaa981f364" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
Source: stackoverflow.com
Related Query
- Chartjs in format Line is full points
- Chartjs Line Color Between Two Points
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS - handling of overlapping points in line chart
- How to hide some points inside my line graphic in React ChartJS 2?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- Line ChartJs would not display - Date format issue
- chartjs line graph points with different color
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chart.js - Line chart does not render all points when using Point[] format
- ChartJS set color of Line chart points depending on Y Axis
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- Chartjs change grid line color
- Chartjs Tooltip Line Breaks
- Dotted Line in ChartJS
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Adding Image inside Linechart points in ChartJs
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- ChartJS : How to leave just points without lines
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJs line chart repaint glitch while hovering over
- Chartjs 2 scaling lots of data points
- How to render a vertical line on hover in chartjs
More Query from same tag
- Vertical line at the end of a dataset
- angular chartjs line chart default options
- line charts is higher that the dataset in Chart.JS
- Charts not showing on ASP.NET MVC page
- Data of same dataset don't have the same color in chartjs
- chart.js not accepting data in dataset which stored in local storage
- Removing ChartJS 2 border and shadow from point style legend
- How to align legend in angular-chart.js
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- Connecting Two Datasets in Chart.js Into a Single Line
- set y-axis scale manually in a bar chart using angular-chart.js
- Can we remove bar chart line on click on pie chart legend label?
- How to center bars on x-axis of Chart.js bar graph?
- How to push element in array in a certain structure
- ChartJS Draw grid line X-Axis and Y-Axis
- ChartJS: How to set a data point to be hidden by default?
- Plotting objects in Chart.js
- Chart.js how to modify an existing legend
- How to use Chart.js in Angular4?
- in chart js tooltip font size is not working
- How to get the bands to implement in Chart.js the band extension?
- UnCaught IndexSizeError: ChartJS
- using gradient colors in angular-chart.js
- DiscordAPIError: Invalid Form Body embed.image.url: Scheme "[object response]" is not supported. Scheme must be one of ('http', 'https')
- ChartJS - tooltip of one element is covering point that user should be able to select
- Using string list as Chart.js label
- Hide/show chart.js charts
- Canvas static height Chartjs
- Chart.js br chart only displaying first value
- bower degrades chart.js each time installing other packages