Bar chart chartjs border control
Question
First ticket for me.
I am kind of stuck with a simple requirement.
I would like to put a black border on this bar chart.
CFFCHART( 'my-chart', { type:'bar', data:{ labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'], datasets:[ { label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS', data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165], backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'] } ] } } )
Thanks in advance for any help !
2 answers
solution1
1 2022-05-01 13:49:06
CFFCHART(
'my-chart',
{
type:'bar',
data:{
labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
datasets:[
{
label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165],
backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'],
borderWidth: 2,
borderColor:['rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)']
}
]
}
}
)
solution2
0 2022-05-02 14:57:20
It is not very clear if you want a border around your entire chart or around the bars.
If you want border around the bars:
You can simply insert a borderColor array into your dataset. Check my example:
var ctx = document.getElementById("my-chart").getContext("2d"); console.log('hi', ctx) var myChart = new Chart(ctx, { type: 'bar',/*from w ww.ja va2 s. c om*/ data: { labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'], datasets: [{ label: 'UPSIDE/DOWNSIDE SCENARII ANALYSIS', data: ['34', '55', '77', '96', '344'], backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'], borderColor: [ 'black', 'black', 'black', 'black', 'black', 'black' ], borderWidth: 4 }] }, }); <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <div> <canvas id="my-chart" width="400" height="400"></canvas> </div> </body> </html>
Now if you want a border all around your chart, you can just wrap the canvas inside a div and add a border to it.
<div style="border:1px solid black;">
<canvas id="my-chart" width="400" height="400"></canvas>
</div>
I hope it can help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.