admin管理员组文章数量:1316537
I am trying to create something that looks like this using ChartJS line graph. I've got the top gradient working as I want, I just cannot find a way to get the bottom gradient to change when my data value is below 0.
I've tried using an array of different background colors based on my data and I have tried using plugin beforeDraw to change the background color (it changed them all to the same color).
I am trying to create something that looks like this using ChartJS line graph. I've got the top gradient working as I want, I just cannot find a way to get the bottom gradient to change when my data value is below 0.
I've tried using an array of different background colors based on my data and I have tried using plugin beforeDraw to change the background color (it changed them all to the same color).
Share Improve this question asked Oct 3, 2018 at 22:07 Brad HBrad H 641 silver badge6 bronze badges 2- Please read How do I ask a good question? and How to create a Minimal, Complete, and Verifiable example. Currently it's unclear exactly what your problem is and what you want to achieve. Your screenshot shows a line that changes stroke and fill colour when it goes below 0. Is that what your code does now? Is it an example of what you want to achieve? – timclutton Commented Oct 4, 2018 at 8:35
- 2 The photo is the graph I am trying to achieve. I need a different background color for positive and negative data. Sorry I did not make that clear. I appreciate your constructive criticism of my post. Thank you. – Brad H Commented Oct 4, 2018 at 16:49
2 Answers
Reset to default 7Chart.js issue #3071 Multiple fill colors for line chart seems to match your objective. The official response is to use a CanvasGradient. Fortunately, 'berosoboy' has posted an inline plugin to do this. A working example is included below. I've modified it slightly to remove references to window.myColors
.
let posColour = 'rgba(0, 255, 0, .1)',
negColour = 'rgba(255, 0, 0, .1)',
myBarChart = new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
datasets: [{
label: 'Series1',
data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1]
}]
},
options: {
maintainAspectRatio: false
},
// source: https://github./chartjs/Chart.js/issues/3071#issuement-371001496
plugins: [{
beforeRender: function(c, options) {
var dataset = c.data.datasets[0];
var yScale = c.scales['y-axis-0'];
var yPos = yScale.getPixelForValue(0);
var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
gradientFill.addColorStop(0, posColour);
gradientFill.addColorStop(yPos / c.height - 0.01, posColour);
gradientFill.addColorStop(yPos / c.height + 0.01, negColour);
gradientFill.addColorStop(1, negColour);
var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
model.backgroundColor = gradientFill;
}
}]
});
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
Chart.js v3.x supports this natively:
let posColour = 'rgba(0, 255, 0, .1)',
negColour = 'rgba(255, 0, 0, .1)',
myBarChart = new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
datasets: [{
label: 'Series1',
data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1],
fill: {
target: 'origin',
above: posColour,
below: negColour
}
}]
},
options: {
maintainAspectRatio: false
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>
Excellent answer from @Timclutton, indeed from the version 3.x already supports it natively where above represents the positive color and below the negative color
本文标签: javascriptChartJS different background gradient depending on data (line graph)Stack Overflow
版权声明:本文标题:javascript - ChartJS different background gradient depending on data (line graph) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741998936a2410611.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论