How to add tooltip for Chartist Line Chart with dynamic data?

Question

I was use chartist line chart for my page.it was loaded with dynamic data from database.And also it shows data for day,week,month. It working fine for all range.My problem is i don't know how to show tool tip for entire records on hover,with dynamic data. My js coding is

   (function () {
  var scoreChart = function scoreChart(id, labelList, series1List) {
    var scoreChart = new Chartist.Line('#' + id, {
      labels: labelList,
      series: [series1List]
    }, {
      lineSmooth: Chartist.Interpolation.simple({
        divisor: 2
      }),
      fullWidth: true,
      chartPadding: {
        right: 25
      },
      series: {
        "series-1": {
          showArea: false
        }
      },
      axisX: {
        showGrid: false
      },
      axisY: {
        labelInterpolationFnc: function labelInterpolationFnc(value) {
          return value ;
        },
        scaleMinSpace: 40
      },
      plugins: [Chartist.plugins.tooltip()],
      low: 0,
      showPoint: false,
      height: 300
    });

    scoreChart.on('created', function (data) {
      var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
      var width = data.svg.width();
      var height = data.svg.height();

      var filter = defs.elem('filter', {
        x: 0,
        y: "-10%",
        id: 'shadow' + id
      }, '', true);

      filter.elem('feGaussianBlur', { in: "SourceAlpha",
        stdDeviation: "24",
        result: 'offsetBlur'
      });
      filter.elem('feOffset', {
        dx: "0",
        dy: "32"
      });

      filter.elem('feBlend', { in: "SourceGraphic",
        mode: "multiply"
      });

      defs.elem('linearGradient', {
          id: id + '-gradient',
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 0
      }).elem('stop', {
          offset: 0,
          'stop-color': 'rgba(22, 141, 238, 1)'
      }).parent().elem('stop', {
          offset: 1,
          'stop-color': 'rgba(98, 188, 246, 1)'
      });

      return defs;
    }).on('draw', function (data) {
      if (data.type === 'line') {
        data.element.attr({
          filter: 'url(#shadow' + id + ')'
        });
      } else if (data.type === 'point') {

        var parent = new Chartist.Svg(data.element._node.parentNode);
        parent.elem('line', {
          x1: data.x,
          y1: data.y,
          x2: data.x + 0.01,
          y2: data.y,
          "class": 'ct-point-content'
        });
      }
      if (data.type === 'line' || data.type == 'area') {
        data.element.animate({
          d: {
            begin: data.index,
            dur: 1000,
            from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
            to: data.path.clone().stringify(),
            easing: Chartist.Svg.Easing.easeOutQuint
          }
        });
      }
    });
  };


  var DayLabelList = <?php echo $daydate; ?>;
  var DaySeries1List = {
    name: "series-1",
    data: <?php echo $daysales; ?>
  };

  var WeekLabelList = <?php echo $weeklydate; ?>;
  var WeekSeries1List = {
    name: "series-1",
    data: <?php echo $weeklysales; ?>
  };

  var MonthLabelList = <?php echo $monthlydate; ?>;
  var MonthSeries1List = {
    name: "series-1",
    data: <?php echo $monthlysales; ?>
  };

  var createChart = function createChart(button) {
    var btn = button || $("#ecommerceChartView .chart-action").find(".active");

    var chartId = btn.attr("href");
    switch (chartId) {
      case "#scoreLineToDay":
        scoreChart("scoreLineToDay", DayLabelList, DaySeries1List);
        break;
      case "#scoreLineToWeek":
        scoreChart("scoreLineToWeek", WeekLabelList, WeekSeries1List);
        break;
      case "#scoreLineToMonth":
        scoreChart("scoreLineToMonth", MonthLabelList, MonthSeries1List);
        break;
    }
  };

  createChart();
  $(".chart-action li a").on("click", function () {
    createChart($(this));
  });
})();

Thanks in advance.The charts contain 3 parts for day/month/week.every range click it shows corresponding data

Answer 1

For anybody that comes across this issue, I found the issue is the ordering of the js files, so tooltip js file needs to be after the chartist js file.

<script src="assets/js/plugins/chartist.min.js"></script>
<script src="assets/js/plugins/chartist-plugin-tooltip.min.js"></script>

Then in the options just call it as;

  optionsDailySalesChart = {
    plugins: [
      Chartist.plugins.tooltip()
    ],
    lineSmooth: Chartist.Interpolation.cardinal({
      tension: 1
    }),
    low: 0, ......... etc

And don't forget the css file...

Edit: I also used the fork of the plugin here which is more up to date https://github.com/LukBukkit/chartist-plugin-tooltip