Question

0

179

Views

Overlapping stack chart in Canvas JS

i have a code which should give me an overlapping bar chart , one inside other in canvas js , something like below Output Needed

So it should be combination of stacked horizontal graph , and one overlapping graph inside the first ( as in pic)

but am getting everything inside one main graph

below is the code .

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
    text: "Chart Title"
  },
  reversed:true,
  
  data: [
    {
      type: "error",
      whiskerThickness: 0,
      color: "#004ca0",
      dataPoints: [
        { label: "Alpha", y: [0 , 71] },
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#34dc00",
      dataPoints: [
        { label: "Alpha", y: 60 },
      ]
    },
    {
      type: "column",
      axisXType: "secondary",
      color: "#3cfa00",
      dataPoints: [
        { label: "Alpha", y: 50 },
      ]
    },
    
  ]
});

chart.render();
chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10);
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Thanks

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T03:03:18.014Z

In the code that you have shared, you are using column chart whereas in the screenshot shared it needs Stacked Bar Chart. Using Stacked Bar / Stacked Bar 100% & Error chart, you can achieve as shown in the screenshot shared. Below is the working code.

var chart = new CanvasJS.Chart("chartContainer", {
  dataPointWidth: 70,
  axisX: {
    lineThickness: 0,
    tickLength: 0,
    labelFormatter: function(e) {
      return "";
    }
  },
  axisY: {
    includeZero: true,
    lineThickness: 0,
    gridThickness: 0,
    tickLength: 0,
    labelFormatter: function(e) {
      return "";
    }
  },
  toolTip: {
    shared: true
  },
  data: [{
    type: "stackedBar100",
    name: "Unique Opens: 33.3%",
    showInLegend: true,
    color: "#23a9e8",
    dataPoints: [
      { x: 1, y: 33.3 }
    ]
  }, {
    type: "error",
    name: "Unique Clicks: 33.3%",
    showInLegend: true,
    legendMarkerType: "square",
    linkedDataSeriesIndex: 0,
    stemThickness: 25,
    whiskerThickness: 0,
    color: "#336a84",
    dataPoints: [
      { x: 1, y: [0, 33.3] }
    ]
  }, {
    type: "stackedBar100",
    name: "Unique Opens: 66.7%",
    showInLegend: true,
    color: "#dfe3e4",
    dataPoints: [
      { x: 1, y: 66.7 }
    ]
  }]
});

chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 100px; width: 100%;"></div>

Answer 2 · 2022-07-03T03:03:18.022Z

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
        text: "Chart Title"
    },
    reversed:true,
    data: [
        {type: "error",  axisXType: "secondary", color: "#34dc00", dataPoints: [{ label: "Alpha", y: [ 0, 100 ] }, ]}, 
        {type: "column", axisXType: "secondary", color: "#004ca0", dataPoints: [{ label: "Alpha", y: 71 }, ] }, 
        {type: "column", axisXType: "secondary", color: "#ff0000", dataPoints: [{ label: "Alpha", y: 50 }, ] }
    ]
});

chart.render();
chart.data[0].set("stemThickness", chart.get("dataPointWidth") * 4 + 10);

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

0

179

Overlapping stack chart in Canvas JS

2 answers

0

0

Find remote jobs

Andres GPT