0
240
Viewsshow two different stacked column data in one chart canvasjs react
I want two stacked column data in one chart using canvasjs like this:
I have currently done something like this with the options: this achieves removing x axis and secondary y axis and showing two data together
{
animationEnabled: true,
options:{
scales: {
xAxes: [{ stacked:true}]
}
},
axisY: {
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
margin:24,
},
axisY2: {
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
margin:24,
labelFormatter: function(){
return " ";
}
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
},
data: [{
type: "stackedColumn",
name: "Proven Oil Reserves (bn)",
legendText: "Proven Oil Reserves",
showInLegend: false,
dataPoints:[
{ y: 30.25 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
showInLegend: false,
dataPoints:[
{ y: 17.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
},
{
type: "stackedColumn",
name: "Oil Production (million/day)",
legendText: "Oil Production",
axisYType:"secondary",
margin:10,
showInLegend: false,
dataPoints:[
{ y: 10.46 },
]
}
]
}
it produces the result like:
what I need is to
- give margin between two datasets
- able to label datasets with text over them as seen in the image above
·
Juan Pablo Isaza
1 answers
Answer question0
give margin between two datasets
There will be gap between datapoints when the x-values are different.
able to label datasets with text over them as seen in the image above
You can use indexlabels. Please refer CanvasJS Docs for more info / examples. Below is an working example.
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return "";
}
},
axisY: {
includeZero: true,
tickLength: 0,
lineThickness: 0,
gridColor: "#ddd",
labelFormatter: function(e) {
return "";
}
},
toolTip: {
shared: true
},
data: [{
type: "stackedColumn",
indexLabel: "RM xyz",
indexLabelFontColor: "#fff",
dataPoints: [
{ x: 1, y: 47, color: "#c63531" },
{ x: 2, y: 32, color: "#449fc7" }
]
}, {
type: "stackedColumn",
indexLabel: "RM xyz",
indexLabelFontColor: "#fff",
dataPoints:[
{ x: 1, y: 32, color: "#bb8786" },
{ x: 2, y: 27, color: "#74ab3e" }
]
}]
});
chart.render();<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
·
Juan Pablo Isaza
Report
Answer question