如何设置距离 amchart 折线图工具提示

Question

I have problem to make my tooltip in amchart have to look nice, I just want to make that tooltip not struck down by other tooltip, this is my screen shoot amchart tooltip

how can I solve my problem? this is my code with amchart

< style > #chartdiv {
        height: 280 px;
        position: relative;
    } < /style>
    <!-- Chart code -->
    < script >
    am4core.ready(function() {

        // Themes begin
        am4core.useTheme(am4themes_kelly);
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartdiv", am4charts.XYChart);

        // Enable chart cursor
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.lineX.disabled = true;
        chart.cursor.lineY.disabled = true;

        // Enable scrollbar
        chart.scrollbarX = new am4core.Scrollbar();

        // Add data
        chart.data = <?php
echo $realisasi;
?>;

        // Create axes
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.dataFields.category = "Date";
        dateAxis.renderer.grid.template.location = 0.5;
        dateAxis.dateFormatter.inputDateFormat = "yyyy-MM-dd";
        dateAxis.renderer.minGridDistance = 40;
        dateAxis.tooltipDateFormat = "MMM dd, yyyy";
        dateAxis.dateFormats.setKey("day", "dd");

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        // Create series
        var series = chart.series.push(new am4charts.LineSeries());
        series.tooltipText = "{date}\n[bold font-size: 17px]realisasi: {valueY}[/]";
        series.tooltip.valign = "middle";
        series.dataFields.valueY = "realisasi";
        series.dataFields.dateX = "date";
        series.strokeDasharray = 3;
        series.strokeWidth = 2
        series.strokeOpacity = 0.3;
        series.strokeDasharray = "3,3"

        var bullet = series.bullets.push(new am4charts.CircleBullet());
        bullet.strokeWidth = 2;
        bullet.stroke = am4core.color("#fff");
        bullet.setStateOnChildren = true;
        bullet.propertyFields.fillOpacity = "opacity";
        bullet.propertyFields.strokeOpacity = "opacity";

        var hoverState = bullet.states.create("hover");
        hoverState.properties.scale = 1.7;

        function createTrendLine(data) {
            var trend = chart.series.push(new am4charts.LineSeries());
            trend.dataFields.valueY = "pakta";
            trend.dataFields.dateX = "date";
            trend.strokeWidth = 2
            trend.stroke = trend.fill = am4core.color("#c00");
            trend.data = data;

            var bullet = trend.bullets.push(new am4charts.CircleBullet());
            bullet.tooltipText = "{date}\n[bold font-size: 17px]pakta: {pakta}[/]";
            bullet.strokeWidth = 2;
            bullet.stroke = am4core.color("#fff")
            bullet.circle.fill = trend.stroke;

            var hoverState = bullet.states.create("hover");
            hoverState.properties.scale = 1.7;

            return trend;
        };

        // createTrendLine();

        createTrendLine(<?php
echo $pagu;
?>);
    }); // end am4core.ready()
< /script>

<!-- HTML -->
< div id = "chartdiv" > < /div>

Help me to solve my problem, or whether other solution to make my two tooltip is not struck down.

Answer 1

You didn't specify any sample data on your code, but try replacing valign :

series.tooltip.valign = "middle";

with pointerOrientation :

series.tooltip.pointerOrientation = "down";