Anychart: how to combine Jump line and multiseries column chart?

Question

I'm trying to combine a jump line with a multiseries column chart. Is it possible to create a jump line specifically for each column of the multiseries column chart? For now the only thing that i could obtain is a jump line for each group of the dataset, here's an example:

anychart.onDocumentReady(function () {

   var data = [
      ["January", 12000, 10000, 8100],
      ["February", 15000, 12000, 8200],
      ["March", 16000, 18000, 8300],
    ];

    var dataSet = anychart.data.set(data);
    var mapping1 = dataSet.mapAs({x: 0, value: 1});
    var mapping2 = dataSet.mapAs({x: 0, value: 2});
    var jump1 = dataSet.mapAs({x: 0, value: 3});

    // create a chart
    var chart = anychart.column();

    // create the series and set the data
    var series1 = chart.column(mapping1);
    var series2 = chart.column(mapping2);

    var series3 = chart.jumpLine(jump1);
    series3.stroke("3 #FFFF00");

    chart.container("container");
    chart.draw();
});

score 1 · Accepted Answer · answered Oct 14 '21 at 03:20

1

If I got your idea correctly, then you can create an additional xScale and xAxis. Then bind the jump series to that additional scale. Here is the live sample based on your code.

answered Oct 14 '21 at 03:20

AnyChart Support

3,770
1
10
16

Thanks for your support. Combining the example you had provided me and the the method pointWidth() I was able to reach out my goal. – Domenico Santoro Oct 14 '21 at 10:10

score 0 · Answer 2 · answered Oct 14 '21 at 10:16

If someone needs this, thanks to @AnyChart Support 's answer here's the code for combining this two chart.

anychart.onDocumentReady(function () {

  var data = [
    ["January", 12000, 10000],
    ["February", 15000, 12000],
    ["March", 16000, 18000],
  ];
  var jumpData = [
    ['January_1', 1000],
    ['January_2', 3000],
    ['February_1', 5000],
    ['February_2', 6000],
    ['March_1', 5000],
    ['March_2', 7500],
  ];

  var dataSet = anychart.data.set(data);
  var jumpDataSet = anychart.data.set(jumpData);
  var mapping1 = dataSet.mapAs({x: 0, value: 1});
  var mapping2 = dataSet.mapAs({x: 0, value: 2});
  var jump1 = jumpDataSet.mapAs({x: 0, value: 1});

  // create a chart
  var chart = anychart.column();
  chart.barGroupsPadding(1);
    // Set the padding between bars or columns.
  chart.barsPadding(1);
  


  // create the series and set the data
  var series1 = chart.column(mapping1);
  var series2 = chart.column(mapping2);

  var additionalXscale = anychart.scales.ordinal();
  chart.xAxis(1).scale(additionalXscale).enabled(false);

  var series3 = chart.jumpLine(jump1);
  series3.pointWidth('60%');
  series3.xScale(additionalXscale);
  series3.stroke("5 #00FF00");
series3.name = "AAA"
  chart.container("container");
  chart.draw();
});

Anychart: how to combine Jump line and multiseries column chart?

2 Answers2