score:7
i've created something called an overlay chart that i have added to my fork of chart.js (https://github.com/leighquince/chart.js) that could be used in this situation. it works in the same was as a line or bar chart, only difference is you declare an extra property called type
that can either be 'line'
or 'bar'
. then just call new chart(ctx).overlay(data)
.
so for your example you could just have your bar chart and then provided another data set (with some better colors than i have used) to show the line.
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
//new option, barline will default to bar as that what is used to create the scale
type: "line",
fillcolor: "rgba(220,220,220,0.2)",
strokecolor: "rgba(0,0,0,0.6)",
pointcolor: "rgba(0,0,0,0.6)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
datasetfill:false,
data: [20, 20, 20, 20, 20, 20, 20]
}, {
label: "my first dataset",
//new option, barline will default to bar as that what is used to create the scale
type: "bar",
fillcolor: "rgba(220,20,220,0.2)",
strokecolor: "rgba(220,20,220,1)",
pointcolor: "rgba(220,20,220,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
data: [32, 25, 33, 88, 12, 92, 33]
}]
};
var ctx = document.getelementbyid("canvas").getcontext("2d");
var chart = new chart(ctx).overlay(data, {
responsive: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/leighquince/chart.js/master/chart.js"></script>
<canvas id="canvas" width="400"></canvas>
score:2
strangewill's answer was excellent as a foundation but i needed data-driven vertical lines on a bar graph so modified it as follows:
first i added a property to the options array (adding another dataset is perhaps cleaner but i would have had to tell chartjs to ignore it), where each option is a data value index that i want to highlight, roughly as follows:
chartdefaults.verticaloverlayatbar = [itemone, itemtwo]
...
var historychart = new chart(ctx).baroverlay(chartdata, chartdefaults);
i then modified strangewill's code, extending it to iterate the array of items from above and draw vertical lines on the indicated bar.
chart.types.bar.extend({
name: 'baroverlay',
draw: function (ease) {
// first draw the main chart
chart.types.bar.prototype.draw.apply(this);
var ctx = this.chart.ctx;
var barwidth = this.scale.calculatebarwidth(this.datasets.length);
for (var i = 0; i < this.options.verticaloverlayatbar.length; ++i) {
var overlaybar = this.options.verticaloverlayatbar[i];
// i'm hard-coding this to only work with the first dataset, and using a y value that i know is maximum
var x = this.scale.calculatebarx(this.datasets.length, 0, overlaybar);
var y = this.scale.calculatey(2000);
var bar_base = this.scale.endpoint
ctx.beginpath();
ctx.linewidth = 2;
ctx.strokestyle = 'rgba(255, 0, 0, 1.0)';
ctx.moveto(x, bar_base);
ctx.lineto(x, y);
ctx.stroke();
}
ctx.closepath();
}
});
it's not perfect as i'm not familiar with the internals chartjs code, in particular my lines were 2 bars off although my suspicion is that that's a fencepost error in the data array rather than the chart calculations. however, hopefully it's a useful step forwards for someone else.
score:6
i needed something similar, but instead of a line graph i needed like a real overlay line that was flat.
just extended the chart like so:
chart.types.bar.extend({
name: 'baroverlay',
draw: function (ease) {
chart.types.bar.prototype.draw.apply(this);
ctx.beginpath();
ctx.linewidth = 2;
ctx.strokestyle = 'rgba(255, 0, 0, 1.0)';
ctx.moveto(35, this.scale.calculatey(100));
ctx.lineto(this.scale.calculatex(this.datasets[0].bars.length), this.scale.calculatey(100));
ctx.stroke();
}
});
mine is hard-coded to draw a line at the "100" mark (in this case, where we were looking at having a target of 100%).
and call it like so:
new chart(ctx).baroverlay(data, options);
i also found quince's code out of date and not compatible with the 1.0.2 chart.js code somehow (rendering went all sideways).
Source: stackoverflow.com
Related Query
- Overlay Line on chart.js Graph
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Offset Overlay Line on chart.js Graph
- Chart Js update legend boxes of graph with graph line style
- No tooltips on Chart JS line graph
- Chart JS Line Graph multitooltipkey background color issue
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Relative bar chart overlay on line chart in chart.js
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- ChartJS line chart or bar graph from a Java program
- How to Add X axis Padding in chart js Line Graph
- Canvas line chart on this graph stretch beyond the assigned lengths
- chartjs line graph destroy function is not clearing the old chart instances
- ChartJS: Is this horizontal stacked bar and line graph multiaxis chart even possible?
- Combo bar chart graph line gets obscured by bars
- How to plot a single value with line in line chart graph using charts.js?
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- Chart Js Change Label orientation on x-Axis for Line Charts
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Remove the vertical line in the chart js line chart
- Chart.js creating a line graph using dates
- Moving vertical line when hovering over the chart using chart.js
- Chart.js - Plot line graph with X , Y coordinates
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- line chart with {x, y} point data displays only 2 values
- Chart.js how to show cursor pointer for labels & legends in line chart
- Line chart disable interpolation
More Query from same tag
- Legend only show on force refresh of page-chartjs
- Different major tick format in Chart.js
- Meteor, ChartsJS and MongoDB
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- How do you use user input as data values in chart.js?
- How can I move a label left, paint it black, or remove it (Chart.JS)?
- Chart js options not changing chart
- Retrieve value returned from a function in Angular
- How would i print out HTML Chart.Js Legends using the global parameters
- How to feed hour and minute data into chartJS
- How to use legendCallback or similar when using Chart.js with TypeScript
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- Chart from chart.js to pdf
- How to set the gap between data items in a chartjs chart
- Chart js logarithmic line chart showing NaN values instead of null
- Chart.js and EJS: Display String, Not Calculation Result
- Time graphs chart.js
- chart js: when all the values passed to data are zeros, nothing is showing
- change long labels to multiline(wrap) label in ChartJs
- How to make points in chartjs draggable?
- Chart.js two Y-Axis, one with negative values
- Angular2 Update ng2-charts with labels
- Is there a way to store a chart as an image directly to server using Chart.js?
- Filling area between two lines - Chart.js v2
- In chartjs, add link text on tooltip
- Scatter chart in chart.js
- chartjs - json data for scatter graph, issue with date
- How to vary the thickness of doughnut chart, using ChartJs.?
- Chart.js - scaleType='date' not working
- Canvas static height Chartjs