Search code examples
javascriptchartsamcharts5

Amcharts5 chart add tooltip to circle

I`m trying to add a tooltip to my chart but it doesn't work. I've added it both to bullet and to series as well.

There is no enough info in docs about how to add tooltip in this case.

When I add tooltip to series in which graphic is based everything works perfectly

Can you help?

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

am5.ready(function() {

  // Create root element
  // https://www.amcharts.com/docs/v5/getting-started/#Root_element
  var root = am5.Root.new("chartdiv");

  // Set themes
  // https://www.amcharts.com/docs/v5/concepts/themes/
  root.setThemes([
    am5themes_Animated.new(root)
  ]);

  // Create chart
  // https://www.amcharts.com/docs/v5/charts/xy-chart/
  var chart = root.container.children.push(am5xy.XYChart.new(root, {
    panX: true,
    panY: true,
    wheelY: "zoomXY",
    pinchZoomX: true,
    pinchZoomY: true
  }));

  chart.get("colors").set("step", 2);

  // Create axes
  // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
  var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererX.new(root, {}),
    maxDeviation: 0.3,
  }));

  var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {}),
    maxDeviation: 0.3,
  }));

  var tooltip = am5.Tooltip.new(root, {
    labelText: "MCaPos: {valueY}\nRN: ${valueY}",
    getFillFromSprite: false,
    getStrokeFromSprite: false,
    autoTextColor: false,
    getLabelFillFromSprite: false,
  });

  tooltip.get('background').setAll({
    fill: am5.color('#ffffff'),
    strokeWidth: 0,
  })

  tooltip.label.setAll({
    fill: am5.color('#000000')
  });

  console.log(tooltip)

  // Create series
  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
  var series0 = chart.series.push(am5xy.LineSeries.new(root, {
    calculateAggregates: true,
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "y",
    valueXField: "x",
    valueField: "value",
    tooltip: am5.Tooltip.new(root, {
      labelText: "{valueY}"
    })
  }));

  // Create series
  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
  var series = chart.series.push(am5xy.LineSeries.new(root, {
    name: "Series 1",
    xAxis,
    yAxis,
    valueYField: "y",
    valueXField: "x",
    tooltip: am5.Tooltip.new(root, {
      labelText: "{valueY}"
    })
  }));
  series.strokes.template.setAll({
    strokeWidth: 2,
    strokeDasharray: [3, 3]
  });

  series.data.setAll([{
    "x": 0.01,
    "y": 1409090.91
  }, {
    "x": 0.06,
    "y": 1589743.59
  }, {
    "x": 0.11,
    "y": 1823529.41
  }, {
    "x": 0.16,
    "y": 2137931.03
  }, {
    "x": 0.21,
    "y": 2583333.33
  }, {
    "x": 0.26,
    "y": 3263157.89
  }, {
    "x": 0.31,
    "y": 4428571.43
  }, {
    "x": 0.36,
    "y": 6888888.89
  }, {
    "x": 0.41,
    "y": 15500000
  }]);

  var circleTemplate = am5.Template.new({});

  series0.bullets.push(function() {
    var graphics = am5.Circle.new(root, {
      fill: am5.color('#31DB42'),
    }, circleTemplate);
    return am5.Bullet.new(root, {
      sprite: graphics,
      radius: 1
    });
  });

  // Add heat rule
  // https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
  series0.set("heatRules", [{
    target: circleTemplate,
    min: 3,
    max: 35,
    dataField: "value",
    key: "radius"
  }]);

  // Add bullet
  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
  var starTemplate = am5.Template.new({});

  series0.strokes.template.set("strokeOpacity", 0);
  series0.set('tooltip', tooltip);

  // Add cursor
  // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
  chart.set("cursor", am5xy.XYCursor.new(root, {
    xAxis,
    yAxis,
    snapToSeries: [series0, series]
  }));
  series0.data.setAll([{
    "x": 0.09271021903999942,
    "y": 2712290
  }]);
  series0.appear(1000);

  // Make stuff animate on load
  // https://www.amcharts.com/docs/v5/concepts/animations/
  series.appear(1000);
  chart.appear(1000, 100);

}); // end am5.ready()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<div id="chartdiv" class="mt-20"></div>

Solution

  • Your mistake was not giving your series0 data a value property.

    This code should work properly and do what you were trying to get

    var root = am5.Root.new("chartdiv");

var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelY: "zoomXY",
  pinchZoomX: true,
  pinchZoomY: true
}));

var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererX.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

var tooltip = am5.Tooltip.new(root, {
  labelText: "MCaPos: {valueY}\nRN: ${valueY}",
  getFillFromSprite: false,
  getStrokeFromSprite: false,
  autoTextColor: false,
  getLabelFillFromSprite: false,
});
tooltip.get('background').setAll({
  fill: am5.color('#ffffff'),
  strokeWidth: 0,
});
tooltip.label.setAll({
  fill: am5.color('#000000')
});

var series0 = chart.series.push(am5xy.LineSeries.new(root, {
  calculateAggregates: true,
  name: "Series 0",
  xAxis,
  yAxis,
  valueYField: "y",
  valueXField: "x",
  valueField: "value",
  tooltip: tooltip
}));
series0.strokes.template.setAll({
  strokeOpacity: 0
});
var circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: am5.color('#31DB42'),
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics,
    radius: 1
  });
});
series0.set("heatRules", [{
  target: circleTemplate,
  min: 3,
  max: 35,
  dataField: "value",
  key: "radius"
}]);
series0.data.setAll([{
  "x": 0.1,
  "y": 2712290,
  "value": 0
}, {
  "x": 0.2,
  "y": 2712290,
  "value": 15
}]);

var series1 = chart.series.push(am5xy.LineSeries.new(root, {
  name: "Series 1",
  xAxis,
  yAxis,
  valueYField: "y",
  valueXField: "x",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueY}"
  })
}));
series1.strokes.template.setAll({
  strokeWidth: 2,
  strokeDasharray: [3, 3]
});
series1.data.setAll([{
  "x": 0.01,
  "y": 1409090.91
}, {
  "x": 0.06,
  "y": 1589743.59
}, {
  "x": 0.11,
  "y": 1823529.41
}, {
  "x": 0.16,
  "y": 2137931.03
}, {
  "x": 0.21,
  "y": 2583333.33
}, {
  "x": 0.26,
  "y": 3263157.89
}, {
  "x": 0.31,
  "y": 4428571.43
}, {
  "x": 0.36,
  "y": 6888888.89
}, {
  "x": 0.41,
  "y": 15500000
}]);

chart.set("cursor", am5xy.XYCursor.new(root, {
  xAxis,
  yAxis,
  snapToSeries: [series0, series1]
}));

    Not really far from your code, just an added value property in series0 data.

    Just one thing worth pointing: If you do not set minValue / maxValue in your heat rule, the lowest value is mapped to the min and the greatest one to the max (ie if your heat rule has a min of 0 and a max of 35, and your data range from 500 to 40000, all data points with a value of 500 will get a radius of 0 and all data points with a value of 40000 will get a radius of 35). If you want all data points above 5000 to have a radius of 35, you can add maxValue: 5000 in your heat rule.