How to fill a graph by a color till a vertical line using chart.js
0
enter image description hereI am trying to display vertical line in a line chart using chart.js. I am using the fiddle as a reference.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
In this I would like to pass the value to line At Index dynamically and also I would like to gray out the graph till that vertical line. For example if the line is at position 3, I want to apply some color till that position.
javascript chart.js chart.js2
asked Nov 10 '17 at 19:21
harihari
11
add a comment |
0
enter image description hereI am trying to display vertical line in a line chart using chart.js. I am using the fiddle as a reference.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
In this I would like to pass the value to line At Index dynamically and also I would like to gray out the graph till that vertical line. For example if the line is at position 3, I want to apply some color till that position.
javascript chart.js chart.js2
asked Nov 10 '17 at 19:21
harihari
11
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34
add a comment |
0
0
0
enter image description hereI am trying to display vertical line in a line chart using chart.js. I am using the fiddle as a reference.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
In this I would like to pass the value to line At Index dynamically and also I would like to gray out the graph till that vertical line. For example if the line is at position 3, I want to apply some color till that position.
javascript chart.js chart.js2
asked Nov 10 '17 at 19:21
harihari
11
enter image description hereI am trying to display vertical line in a line chart using chart.js. I am using the fiddle as a reference.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
In this I would like to pass the value to line At Index dynamically and also I would like to gray out the graph till that vertical line. For example if the line is at position 3, I want to apply some color till that position.
javascript chart.js chart.js2
javascript chart.js chart.js2
asked Nov 10 '17 at 19:21
harihari
11
asked Nov 10 '17 at 19:21
harihari
11
edited Nov 10 '17 at 22:31
hari
asked Nov 10 '17 at 19:21
harihari
11
asked Nov 10 '17 at 19:21
harihari
11
asked Nov 10 '17 at 19:21
harihari
11
11
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34
add a comment |
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34
add a comment |
1 Answer
1
active
oldest
votes
1
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47229785%2fhow-to-fill-a-graph-by-a-color-till-a-vertical-line-using-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
add a comment |
1
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
add a comment |
1
1
1
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
answered Nov 22 '18 at 3:46
Kristie TomKristie Tom
112
112
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47229785%2fhow-to-fill-a-graph-by-a-color-till-a-vertical-line-using-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Welcome to Stack Overflow! I edited the title of your question to be more understandable. I have included code sample from the fiddle. Please try to be more specific what you have already tryed. It can be useful to edit the sample to contain only relevant part of code. It can be also usefull to add an image of desired output.
– IvanH
Nov 10 '17 at 22:16
Hi IvanH, thanks for editing my question. I have uploaded the image. I am able to display the both the line graphs but I am not sure how to scroll that vertical line using slider. I though of passing the slider value to lineAtIndex so that the vertical line will appear at that particular point. Kindly help me with this
– hari
Nov 10 '17 at 22:34