score:5
edit: here is a version with the fill working http://jsfiddle.net/leighking2/slgefm04/6/
so one way to do it would be to extend the line graph. the only prob is you have to override the entire initialise method just to allow all the points to be stored correctly. here is a fiddle showing a custom line graph that does what you describe http://jsfiddle.net/leighking2/slgefm04/
the important bits that have been altered from the original line graph i have placed large comment blocks over so here are the highlights, in the example o have used null to represent gaps but this could just be swapped for -1
in the initialize method the data is processed and turned in to the points, this is where the change needs to happen to allow the missing data to still be included
helpers.each(dataset.data, function(datapoint, index) {
/**
*
* check for datapoints that are null
*/
if (helpers.isnumber(datapoint) || datapoint === null) {
//add a new point for each piece of data, passing any required data to draw.
datasetobject.points.push(new this.pointclass({
/**
* add ignore field so we can skip them later
*
*/
ignore: datapoint === null,
value: datapoint,
label: data.labels[index],
datasetlabel: dataset.label,
strokecolor: dataset.pointstrokecolor,
fillcolor: dataset.pointcolor,
highlightfill: dataset.pointhighlightfill || dataset.pointcolor,
highlightstroke: dataset.pointhighlightstroke || dataset.pointstrokecolor
}));
}
}, this);
then in the draw method whenever we are at a data point we want to ignore or just past one we move the pen rather than drawing
helpers.each(dataset.points, function(point, index) {
/**
* no longer draw if the last point was ignore (as we don;t have anything to draw from)
* or if this point is ignore
* or if it's the first
*/
if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
if (this.options.beziercurve) {
ctx.beziercurveto(
dataset.points[index - 1].controlpoints.outer.x,
dataset.points[index - 1].controlpoints.outer.y,
point.controlpoints.inner.x,
point.controlpoints.inner.y,
point.x,
point.y
);
} else {
ctx.lineto(point.x, point.y);
}
} else if (index === 0 || dataset.points[index - 1].ignore) {
ctx.moveto(point.x, point.y);
}
}, this);
only issue with this was the fill looked proper funky so i commented it out and it's just a line graph now.
score:6
this can now be achieved by setting the spangaps
property to true in the dataset array.
Source: stackoverflow.com
Related Query
- Chart.js gap between points
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How to set the gap between data items in a chartjs chart
- How to adjust spaces between points in chart js?
- gap between half doughnut chart and container div
- How to reduce the gap between bars on bar chart
- Chart.js - Increase spacing between legend and chart
- Connecting points between missing data in chart.js
- Chart JS Fill Between two lines
- Chart.js drag points on linear chart
- Chart JS show multiple data points for the same label
- Chartjs Line Color Between Two Points
- Center point labels between ticks (Polar Area Chart JS)
- ChartJs line chart - display permanent icon above some data points with text on hover
- Find intersection between the chart lines in chartjs
- Increase padding between legend and chart with react-chartjs-2
- Chart.js :set yAxis point to 0 when there is gap between two dates
- ChartJs: Different Fill Colour Between Data Points
- increase the gap between y-axis and first x-axis value chart.js
- chart js data-point between bar charts
- ChartJS - handling of overlapping points in line chart
- Chart.js - Line charts: draw points between grid lines
- to increase space between x axis and first horizontal bar in chart js
- High and low points on chart getting cut off
- Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- add info for points in line chart (js)
- Chart.js drawing line between two points
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart JS pass in custom data for points
More Query from same tag
- How to remove trial version watermark in canvasjs using Jquery (without license)
- Chart.js Customize tool tip to show more data
- ng2-charts - Angular 4 working example
- Remove percentage on DoughtChart in ng2 chart.js
- Changing data when click button in chart.js/vue.js
- Chart js label issue in react js
- ReferenceError: Chart is not defined - chartjs
- Charts.js display two combined line charts for last 7 days
- NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
- Creating charts (charts.js) values coming from SQLite database using AngularJS
- Chart.js Custom Image for Each Point
- I'm unsure of how to get vue js and charts js to work together. correctly
- Customize fill colors for ChartJS 3.x using beforRender plugin event
- Change color of a single point by clicking on it - Chart.JS
- Typescript types for chartjs-adapter-date-fns
- running an onclick command to show a table in chartsJS
- y-axis values are way to high
- Loading multiple doughnut chart from chart.JS in a single component of angular 6
- Highlight chart element when hovering over its corresponding legend Item
- Load data from Google Analytics in a Chart.js chart
- ChartJs chart won't update new values
- How can I cause a legend to appear to the right of the pie (Chart.JS)?
- Angular 2 ng2-charts donut change segment color
- Sort a Chart from Lowest to Highest Value in Chart JS
- d3.csv parseFloat will not parse correctly
- Chart, X and Y-Axis labels are blurred in horizontal bar chart using chart.js
- How to hide the labels of graphs that are not toggled in ChartJS
- How to destroy chart object in order to change chart data dynamically (Chart.js)?
- Chart.js. Edit bar width -v2.5-
- Display JSON data in chartjs