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 !
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)']
}
]
}
}
)
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.j a va2 s . c o m*/
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.