How to use the britecharts/dist/umd/tooltip.min function in britecharts

To help you get started, weโ€™ve selected a few britecharts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github colapdev / ngx-britecharts / src / components / line-chart / LineChart.component.ts View on Github external
private drawChart() {
    let that = this;
    this.line = lineChart();
    this.chartTooltip = tooltip();

    let lineContainer = d3Selection.select(this.el).select('.line-chart-container'),
      containerWidth = lineContainer.node() ? lineContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.line.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.line.hasOwnProperty(option) && option !== 'colorSchema') {
          this.line[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
        showTooltip = true;
github colapdev / ngx-britecharts / src / components / grouped-bar-chart / GroupedBarChart.component.ts View on Github external
private drawChart() {
    this.groupedBar = groupedBar();
    this.chartTooltip = tooltip();

    let groupedBarContainer = d3Selection.select(this.el).select('.grouped-bar-chart-container'),
      containerWidth = groupedBarContainer.node() ? groupedBarContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.groupedBar.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.groupedBar.hasOwnProperty(option) && option !== 'colorSchema') {
          this.groupedBar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
        showTooltip = true;
github colapdev / ngx-britecharts / src / components / stacked-bar-chart / StackedBarChart.component.ts View on Github external
private drawChart() {
    this.stackedBar = stackedBar();
    this.chartTooltip = tooltip();

    let stackedBarContainer = d3Selection.select(this.el).select('.stacked-bar-chart-container'),
      containerWidth = stackedBarContainer.node() ? stackedBarContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.stackedBar.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.stackedBar.hasOwnProperty(option) && option !== 'colorSchema') {
          this.stackedBar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
        showTooltip = true;
github colapdev / ngx-britecharts / dist / components / line-chart / LineChart.component.js View on Github external
LineChartComponent.prototype.drawChart = function () {
        var that = this;
        this.line = lineChart();
        this.chartTooltip = tooltip();
        var lineContainer = d3Selection.select(this.el).select('.line-chart-container'), containerWidth = lineContainer.node() ? lineContainer.node().getBoundingClientRect().width : false;
        if (containerWidth) {
            this.line.width(containerWidth);
            for (var option in this.chartConfig['properties']) {
                if (this.line.hasOwnProperty(option) && option !== 'colorSchema') {
                    this.line[option](this.chartConfig['properties'][option]);
                }
            }
            var showTooltip = false;
            if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
                showTooltip = true;
                this.line.on('customMouseOver', function () {
                    that.chartTooltip.show();
                });
                this.line.on('customMouseMove', function (dataPoint, topicColorMap, dataPointXPosition) {
                    that.chartTooltip.update(dataPoint, topicColorMap, dataPointXPosition);
github colapdev / ngx-britecharts / src / components / chart / Chart.component.ts View on Github external
d3Selection.select(this.el).selectAll(this.chartClickSelector).on('click', (ev) => this.chartConfig['click'](ev));
        }
      }

      if (this.chartConfig.hasOwnProperty('tooltip')) {
        this.tooltipContainer = d3Selection.select(this.el).select(this.tooltipContainerSelector);
        if ([ChartType.Bar, ChartType.Step, ChartType.ScatterPlot].indexOf(this.chartType) > -1) {
          this.tooltip = miniTooltip();

          this.chart.on('customMouseOver', this.tooltip.show);
          this.chart.on('customMouseMove', this.tooltip.update);
          this.chart.on('customMouseOut', this.tooltip.hide);

          this.tooltipContainer.datum(this.data).call(this.tooltip);
        } else if ([ChartType.Line, ChartType.StackedArea, ChartType.GroupedBar, ChartType.StackedBar].indexOf(this.chartType) > -1) {
          this.tooltip = tooltip();

          this.chart.on('customMouseOver', function () {
            that.tooltip.show();
          });
          this.chart.on('customMouseMove', function (dataPoint, topicColorMap, dataPointXPosition) {
            that.tooltip.update(dataPoint, topicColorMap, dataPointXPosition);
          });
          this.chart.on('customMouseOut', function () {
            that.tooltip.hide();
          });

          this.tooltipContainer.datum([]).call(this.tooltip);
        }
        for (let option in this.chartConfig['tooltip']) {
          if (this.tooltip.hasOwnProperty(option)) {
            this.tooltip[option](this.chartConfig['tooltip'][option]);