anychart

pointClick listener on stacked data

curious if there is a way to get the proper index on stacked data (such as a Waterfall diagram) from AnyChart. Using the below on a waterfall gets you the same index for anything click on in a specific stack, when really there should be two index numbers (the column index and the element index within that column).

// add a listener
chart.listen("pointClick", function(e){
  var index = e.iterator.getIndex();
});

Thanks

Solution

  • You can get the element index through e.target.getIndex().

    anychart.onDocumentReady(() => {
  let data = anychart.data.set([
    ["Start", 23,  30,  21],
    ["Jan",   22,  22,  54],
    ["Feb",  -46,  45, -32],
    ["Mar",  -91, -30, -28],
    ["Apr",   37, -27,  36],
    ["May",  -24,  62, -48],
    ["Jun",   55,  40, -29],
    ["Jul",   31,  33,  41],
    ["Aug",  -25, -46,  36],
    ["Sep",   42,  23,  22],
    ["Oct",   67, -44, -40],
    ["Nov",  -24, -31,  37],
    ["Dec",   51,  28,  25],
    ["End", { isTotal: true }, { isTotal: true }, { isTotal: true }],
  ]);

  let seriesData_1 = data.mapAs({ x: 0, value: 1 }),
      seriesData_2 = data.mapAs({ x: 0, value: 2 }),
      seriesData_3 = data.mapAs({ x: 0, value: 3 });

  let chart = anychart.waterfall();

  let series1 = chart.waterfall(seriesData_1),
      series2 = chart.waterfall(seriesData_2),
      series3 = chart.waterfall(seriesData_3);
  
  chart.labels().position("center");
  chart.labels().fontColor("white");
  
  chart.listen("pointClick", e => {
    let columnIndex = e.iterator.getIndex(),
        elementIndex = e.target.getIndex(); // <--- HERE
    
    console.log(`Column index: ${columnIndex}`);
    console.log(`Element index: ${elementIndex}`);
  });
  
  chart.container("container");
  chart.draw();
});
    #container {
  width: 100%;
  height: 350px;
}
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-waterfall.min.js"></script>

<div id="container"></div>

    The example above is a modified version of what you can find there: Waterfall Chart | Basic Charts | AnyChart Documentation