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
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- how to show data label on barchart using chart.js in Angular10 project?
- How to create rounded bars for Bar Chart.js v2?
- Align lines and bars in a mixed chart
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- space before and after data points in chart.js
- ChartJS : It's not showing in html on Django
- Array value is not being passed to the plugin
- How can i add a calculated value on top of the bars in Chart.js?
- Chart.js V2 formatting / styling labels
- How get values on legend label withn Chart js on Angular
- automatic Y-axis scale: max is always as 120% of highest value in ChartJS
- Update Chart.js plugin
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- Drawing a line at a fixed angle relative to data with Chart.js
- Add space Between Columns in Bar chart. chartjs
- React Native Updating State with Api
- Move chart x axis label and borders
- How to remove color label on tool tip?
- Unix Timestamp Chart.js with PHP echo
- Doughnut chart updates with twice the data
- Chart.js is not displayed when page loads first time
- chartjs stepSize by 5
- Tiny error in the ChartJs book
- Can I use chartJS for drawing a stock map with rectangle?
- How to align multiple pie charts side by side?
- Chart.JS tooltip callbacks label and title (v3.5)
- How to create multiple x-axis datasets labels by using chart.js
- Pass objects from javascript to Chart.JS through EJS
- Chart.js updating-animations of radar-charts