score:9
chart.js doesn't support this directly.
- you have to disable the default segment drawing and
- write your own instead
for 1., setting the stroke width to 0 does not work because canvas ignores 0 (and nan, undefined...), so you set it to a very small value to make the line invisible (there is a datasetstroke option, but there is no code that acts on it yet)
it would be logical to also disable the fill. however, with dataset fill turned off, the points get filled with black color (chart.js bug?), so make the points solid by reducing the radius and increasing the strokewidth.
var mylinechart = new chart(ctx).linealt(data, {
datasetstrokewidth: 0.01,
datasetfill: false,
pointdotradius : 2,
pointdotstrokewidth: 3
});
notice that the type is linealt - which is how you take care of the 2. - by extending the line chart type
chart.types.line.extend({
name: "linealt",
draw: function () {
chart.types.line.prototype.draw.apply(this, arguments);
// now draw the segments
var ctx = this.chart.ctx
this.datasets.foreach(function (dataset) {
ctx.strokestyle = dataset.strokecolor
var previouspoint = {
value: null
};
dataset.points.foreach(function (point) {
if (previouspoint.value !== null && point.value !== null) {
ctx.beginpath();
ctx.moveto(previouspoint.x, previouspoint.y);
ctx.lineto(point.x, point.y);
ctx.stroke();
}
previouspoint = point;
})
})
}
});
fiddle - http://jsfiddle.net/slgefm04/66/
score:5
maybe this wasn't available back in 2015 but now the line graph has a styling option spangaps
which if true, lines will be drawn between points with no or null data. if false, points with nan data will create a break in the line.
Source: stackoverflow.com
Related Query
- Line ChartJS empty / null values doesn't break the line
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- Display ellipsis for null or empty values in the bar chart using Chart.js
- Display Chartjs tooltip values outside the canvas - multi line chart
- In ChartJS is it possible to change the line style between different points?
- Stepped line with null values in chart.js
- Chartjs break line for axes tick labels text
- ChartJS Line chart cut off at the top and bottom
- Chart js logarithmic line chart showing NaN values instead of null
- Force ChartJS to show Doughnut chart with null values
- Empty circle - only point strok in line chart for ChartJS
- How do I hide line outside the min/max (scale area) in chartjs 2.0?
- Display Bar chart values in the graph - ChartJS
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- ChartJS - Show values in the center of each bar
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- How to show the chartjs bar chart data values labels as text?
- Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
- How does the chartjs line look start to be greater than 0
- chartjs with the plugin chartjs-plugin-dragdata can i set fix dropdown values
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- how to manipulate with the y-axis values in chartjs
- How do I hide values past the x-axis in chartjs 2.0?
- How to move the x-axis values and line points to the middle of two x-axis lines using chartjs?
- Custom Legend ChartJS not showing the text decoration: line through
- ChartJS tooltip values aren't matching the data after updating multiple charts
- How do I make the Line in ChartJS not exceed the maximum of yAxes
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- My ChartJS Line needs to click the color legend first before it plots the data
- When using chart.js to draw a line chart, if the peak is between two x values instead of "at a x value"
More Query from same tag
- chart.js dynamically add y axes from json
- How do you set up a chart.js scatter line chart through angular-chart.js?
- ChartJS how to sync animations when page loads
- Load JSON to display data, using ng-repeat {ANGULAR.JS}
- Not sure how to rerender chart in the app
- Populating a chartJS with data from API through axios (VueJS)
- Chart.js how to create chart wirhout y-axis for two data sets
- Editing Chart.js legend template
- Charts.js how to have 2 different size y-axis
- chartjs dataset from single line to multiple line
- No chart display for Chart.js and JSON data
- Chart.js Mouse Over Show Old Chart Data
- Chart js 2 bars with one customize label on top
- Fail to load chart on Flask/jinja2 html using chart.js
- How can I style scale numbers in a Polar Area chart (chart.js)
- Custom Legend ChartJS not showing the text decoration: line through
- Angular 7 - Labels and Date values
- chartjs-plugin-streaming + chartjs-plugin-zoom
- Can't size doughnut chart from chart.js
- vue js bar-chart gradient color not showing
- Combine multiple columns values to one label in chart.js
- Chart.js responsive css size
- How to get Chart js labels in scientific notation
- Why is ChartJS combining two charts?
- Chart.js how to inser values from json
- Chart.js pie tooltip getting cut
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- chart.js onAnimationProgress progress percentage
- I can't change the color of the grids in Chart.js
- Snapshot testing ChartJS components with Jest