Displaying all the tooltips in am4charts.XYChart

Question

Hi all I'm using am4charts.XYChart for showing the prices of two different Vendors

The graph is working fine and tooltip of each point is visible only if we hover the cursor over the points in the graph , but my requirement is the tooltip of all the points in the graph should be displayed while the graph is rendered.

It should be displaying all the time without hovering .

I have used the following code to generate the graph .

   <script src="https://www.amcharts.com/lib/4/core.js"></script>
   <script src="https://www.amcharts.com/lib/4/charts.js"></script>
   <script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
   <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

   dynamic_data_arr = [{date: "2019-02-25", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette"},
{date: "2019-02-26", market1: "21.67", sales1: "Amazon", market2: "25.92", sales2: "La Collette,Co-op"}]
                            am4core.useTheme(am4themes_dark);
                            am4core.useTheme(am4themes_animated);
                            // Themes end

                            // Create chart instance
                            chart = am4core.create("amcharts_chartdiv", am4charts.XYChart);                      
                            // Add data
                            // chart.data = [] ;
                            chart.data =  dynamic_data_arr;                                                      
                            // chart.validateData(); 
                            // Create axes
                            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
                            //dateAxis.renderer.grid.template.location = 0;
                            //dateAxis.renderer.minGridDistance = 30;

                            var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
                            // valueAxis1.title.text = "Sales";

                            console.log(valueAxis1);

                            var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
                            console.log(valueAxis2);
                            // valueAxis2.title.text = "Market Days";
                            valueAxis2.renderer.opposite = true;
                            valueAxis2.renderer.grid.template.disabled = true; 

                            var series3 = chart.series.push(new am4charts.LineSeries());
                            series3.dataFields.valueY = "market1";
                            series3.dataFields.dateX = "date";
                            series3.dataFields.nameX = "sales1";
                            series3.name = "Amazon";
                            series3.strokeWidth = 2;
                            series3.tensionX = 0.7;
                            series3.yAxis = valueAxis2;
                            series3.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]";
                            series3.showBalloon = true;


                            var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
                            bullet3.circle.radius = 3;
                            bullet3.circle.strokeWidth = 2;
                            bullet3.circle.fill = am4core.color("#fff");

                            var series4 = chart.series.push(new am4charts.LineSeries());
                            series4.dataFields.valueY = "market2";
                            series4.dataFields.dateX = "date";
                            series4.dataFields.nameX = "sales2";
                            series4.name = "Local Vendors";
                            series4.strokeWidth = 2;
                            series4.tensionX = 0.7;
                            series4.yAxis = valueAxis2;
                            series4.tooltipText = "{nameX}\n[bold font-size: 20]{valueY}[/]";
                            series4.stroke = chart.colors.getIndex(0).lighten(0.5);
                            series4.strokeDasharray = "3,3";
                            series4.showBalloon = true;

                            var bullet4 = series4.bullets.push(new am4charts.CircleBullet());
                            bullet4.circle.radius = 3;
                            bullet4.circle.strokeWidth = 2;
                            bullet4.circle.fill = am4core.color("#fff");

                            // Add cursor
                            chart.cursor = new am4charts.XYCursor();

                            // Add legend
                            chart.legend = new am4charts.Legend();
                            chart.legend.position = "top";

                            // Add scrollbar
                            chart.scrollbarX = new am4charts.XYChartScrollbar();
                            // chart.scrollbarX.series.push(series1);
                            chart.scrollbarX.series.push(series3);
                            chart.scrollbarX.parent = chart.bottomAxesContainer;    `

Please let me know if there is any option to display all the tooltips at the sametime. TIA .

Answer 1

Show all tooltips of a series is not possible, because there is only one per series. I would suggest to use LabelBullets instead (docs) and style them like tooltips.

chart.series.each(series => {
    var labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.setStateOnChildren = true;
    labelBullet.label.text = "{nameX}\n[bold font-size: 20]{valueY}[/]";
    labelBullet.label.maxWidth = 150;
    labelBullet.label.wrap = true;
    labelBullet.label.truncate = false;
    labelBullet.label.textAlign = "middle";
    labelBullet.label.padding(5, 5, 5, 5);
    labelBullet.label.fill = am4core.color("#000");
    const background = new am4core.RoundedRectangle();
    background.cornerRadius(3, 3, 3, 3);
    labelBullet.label.background = background;
    labelBullet.label.background.fill = series.fill;
    labelBullet.label.background.fillOpacity = 0.9;
    labelBullet.label.background.stroke = am4core.color("#fff");
    labelBullet.label.background.strokeOpacity = 1;
});

I forked your JSFiddle and updated it: JSFiddle