amCharts5 - remove crosshairs from tooltip?-CodePudding

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>

CodePudding user response：

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>