javascripttooltipamchartsamcharts5

amCharts5 - remove crosshairs from tooltip?


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>


Solution

  • 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>