amCharts5 - remove crosshairs from tooltip?

Question

I'm making a simple bubble chart using amCharts5. The library has a built in tooltip that looks like a crosshair, I'd like to remove the crosshair lines but keep the tooltip. I haven't been able to find a way to accomplish this.

See the code snippets below for a demonstration of what the crosshairs look like, here's a codepen as well.

I tried adding these lines, per the docs :

cursor.lineY.setAll({
  visible: false

cursor.lineX.setAll({
  visible: false
});

The result was that the cross-hair lines were hidden, but the little tooltips that show up at the end of each crosshair still showed up, which looked confusing and weird.

 // 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, { minGridDistance: 50 }), tooltip: am5.Tooltip.new(root, {}) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}), tooltip: am5.Tooltip.new(root, {}) })); // Create series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = 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: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" }) })); // Add bullet (add circles that appear on the chart) // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets var circleTemplate = am5.Template.new({}); series.bullets.push(function() { var graphics = am5.Circle.new(root, { fill: series.get("fill"), }, circleTemplate); return am5.Bullet.new(root, { sprite: graphics }); }); series.strokes.template.set("strokeOpacity", 0); // Add cursor \\ // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/ chart.set("cursor", am5xy.XYCursor.new(root, { xAxis: xAxis, yAxis: yAxis, snapToSeries: [series] })); // Sample data var data = [{ "y": 69, "x": 1, "value": 69, "name": "sue" }, { "y": 69, "x": 2, "value": 69, "name": "john" }, ] series.data.setAll(data); chart.appear(1000, 100);

 #chartdiv { width: 100%; max-width: 100%; height: 250px; }

 <:-- Resources --> <script src="https.//cdn.amcharts.com/lib/5/index:js"></script> <script src="https.//cdn.amcharts.com/lib/5/xy:js"></script> <script src="https.//cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>

Answer 1

1. Remove the cursor entirely

Delete this piece of code:

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

Remove tooltip declaration from axes settings:

tooltip: am5.Tooltip.new(root, {})

2. Move the remaining tooltip declaration from series to bullets

You do not need this tooltip:

var series = chart.series.push(am5xy.LineSeries.new(root, {
  // ...
  tooltip: am5.Tooltip.new(root, {
    labelText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}"
  })
}));

Instead, do that:

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

series.bullets.push(function() {
  var graphics = am5.Circle.new(root, {
    fill: series.get("fill"),
    tooltipText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" // <--- HERE
  }, circleTemplate);

  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

---

Here is your snippet with these little modifications:

 // 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, { minGridDistance: 50 }) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); // Create series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push(am5xy.LineSeries.new(root, { calculateAggregates: true, xAxis: xAxis, yAxis: yAxis, valueYField: "y", valueXField: "x", valueField: "value" })); // Add bullet (add circles that appear on the chart) // https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets var circleTemplate = am5.Template.new({}); series.bullets.push(function() { var graphics = am5.Circle.new(root, { fill: series.get("fill"), tooltipText: "x: {valueX}, y: {valueY}, value: {value}, name: {name}" // <--- HERE }, circleTemplate); return am5.Bullet.new(root, { sprite: graphics }); }); series.strokes.template.set("strokeOpacity", 0); // Sample data var data = [{ "y": 69, "x": 1, "value": 69, "name": "sue" }, { "y": 69, "x": 2, "value": 69, "name": "john" }, ] series.data.setAll(data); chart.appear(1000, 100);

 #chartdiv { width: 100%; max-width: 100%; height: 250px; }

 <:-- Resources --> <script src="https.//cdn.amcharts.com/lib/5/index:js"></script> <script src="https.//cdn.amcharts.com/lib/5/xy:js"></script> <script src="https.//cdn.amcharts.com/lib/5/themes/Animated.js"></script> <div id="chartdiv"></div>