Conditional Chart area fill in amCharts - amStockCharts
I want to display a graph very similar to below tradingView chart in amCharts. The problem is how can I fill the area between two specific line graphs with different fill color depending on which line graph is above the other.

Using fillToGraph will always fill the same color regardless of whether that graph is below or above the another graph and ends up mixing both the colors as shown below.

I am using amCharts v3.
Please help.
graph amcharts amstock
add a comment |
I want to display a graph very similar to below tradingView chart in amCharts. The problem is how can I fill the area between two specific line graphs with different fill color depending on which line graph is above the other.

Using fillToGraph will always fill the same color regardless of whether that graph is below or above the another graph and ends up mixing both the colors as shown below.

I am using amCharts v3.
Please help.
graph amcharts amstock
You'll need to specify your own colors in your data withfillColorsFieldfor instances where the values intersect and provide your own color. Note that you will need to disable data grouping to usefillColorsField
– xorspark
Nov 26 '18 at 20:09
Or you can fill your graphs usingfillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655
– David Liang
Nov 27 '18 at 0:38
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
Not really. It lets you override the color locally throughfillColors/lineColorbut it doesn't let you control what fill is used for each point. For that you still needfillColorsFieldand disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back usingfillColorsFieldthrough the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.
– xorspark
Nov 27 '18 at 11:43
add a comment |
I want to display a graph very similar to below tradingView chart in amCharts. The problem is how can I fill the area between two specific line graphs with different fill color depending on which line graph is above the other.

Using fillToGraph will always fill the same color regardless of whether that graph is below or above the another graph and ends up mixing both the colors as shown below.

I am using amCharts v3.
Please help.
graph amcharts amstock
I want to display a graph very similar to below tradingView chart in amCharts. The problem is how can I fill the area between two specific line graphs with different fill color depending on which line graph is above the other.

Using fillToGraph will always fill the same color regardless of whether that graph is below or above the another graph and ends up mixing both the colors as shown below.

I am using amCharts v3.
Please help.
graph amcharts amstock
graph amcharts amstock
edited Nov 24 '18 at 14:14
asked Nov 23 '18 at 12:32
KCK
1,2331516
1,2331516
You'll need to specify your own colors in your data withfillColorsFieldfor instances where the values intersect and provide your own color. Note that you will need to disable data grouping to usefillColorsField
– xorspark
Nov 26 '18 at 20:09
Or you can fill your graphs usingfillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655
– David Liang
Nov 27 '18 at 0:38
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
Not really. It lets you override the color locally throughfillColors/lineColorbut it doesn't let you control what fill is used for each point. For that you still needfillColorsFieldand disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back usingfillColorsFieldthrough the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.
– xorspark
Nov 27 '18 at 11:43
add a comment |
You'll need to specify your own colors in your data withfillColorsFieldfor instances where the values intersect and provide your own color. Note that you will need to disable data grouping to usefillColorsField
– xorspark
Nov 26 '18 at 20:09
Or you can fill your graphs usingfillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655
– David Liang
Nov 27 '18 at 0:38
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
Not really. It lets you override the color locally throughfillColors/lineColorbut it doesn't let you control what fill is used for each point. For that you still needfillColorsFieldand disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back usingfillColorsFieldthrough the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.
– xorspark
Nov 27 '18 at 11:43
You'll need to specify your own colors in your data with
fillColorsField for instances where the values intersect and provide your own color. Note that you will need to disable data grouping to use fillColorsField– xorspark
Nov 26 '18 at 20:09
You'll need to specify your own colors in your data with
fillColorsField for instances where the values intersect and provide your own color. Note that you will need to disable data grouping to use fillColorsField– xorspark
Nov 26 '18 at 20:09
Or you can fill your graphs using
fillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655– David Liang
Nov 27 '18 at 0:38
Or you can fill your graphs using
fillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655– David Liang
Nov 27 '18 at 0:38
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
Not really. It lets you override the color locally through
fillColors/lineColor but it doesn't let you control what fill is used for each point. For that you still need fillColorsField and disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back using fillColorsField through the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.– xorspark
Nov 27 '18 at 11:43
Not really. It lets you override the color locally through
fillColors/lineColor but it doesn't let you control what fill is used for each point. For that you still need fillColorsField and disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back using fillColorsField through the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.– xorspark
Nov 27 '18 at 11:43
add a comment |
active
oldest
votes
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
});
}
});
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%2f53446791%2fconditional-chart-area-fill-in-amcharts-amstockcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53446791%2fconditional-chart-area-fill-in-amcharts-amstockcharts%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
You'll need to specify your own colors in your data with
fillColorsFieldfor instances where the values intersect and provide your own color. Note that you will need to disable data grouping to usefillColorsField– xorspark
Nov 26 '18 at 20:09
Or you can fill your graphs using
fillAlphas. The drawback of it is that it also fills the areas when your graphs union. See my answer: stackoverflow.com/a/52955797/2410655– David Liang
Nov 27 '18 at 0:38
@DavidLiang My aim is to fill area bwtween two graphs with red when the red line is above green one and fill with green when green is above red. As Iin the second picture, fillAlphas goes both way when used with fillToGraph and the result is a mix of green and red shades.
– KCK
Nov 27 '18 at 8:01
@xorspark I want to group data while displaying. was just wondering the use of "useDatasetColors". Is that something relevant here?
– KCK
Nov 27 '18 at 8:02
Not really. It lets you override the color locally through
fillColors/lineColorbut it doesn't let you control what fill is used for each point. For that you still needfillColorsFieldand disabling data grouping, which will impact performance. My colleague made a serial chart solution a while back usingfillColorsFieldthrough the init handler here that illustrates the how it can work. It can be adapted to the stock chart with some tweaking.– xorspark
Nov 27 '18 at 11:43