Methods and Events

Public Methods

Redraw the chart

The redraw method is used for redrawing the entire chart. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

  • javascript
  • // Redraw Chart
    var chartObj = $("#container").data("ejChart");
    chartObj.redraw();
    
     //other way of using redraw method
    $("#container").ejChart("redraw");

    Animating the chart

    The animate method animates the series and/or indicators in Chart. When parameter is not passed to this method, then all the series and indicators present in Chart are animated.

  • javascript
  • var chartObj  = $("#container").data("ejChart");
    //animating series array
    chartObj.animate(chartObj.model.series);

    Events

    Annotation Click

    The annotationClick event is triggered while clicking the annotation

  • javascript
  • //annotationClick event for chart
    
    $("#container").ejChart({
    
        annotationClick: function (args) {
                  //Do something
        }
       
    });

    Animation Complete

    The animationComplete event is triggered after the series animation is completed.
    This event will be triggered for each series when the animation is enabled.

  • javascript
  • //animationComplete event for chart
    
    $("#container").ejChart({
    
         animationComplete: function (argument) {
         //Do something
     }
    });

    Axis Label Click

    The axisLabelClick event is triggered while clicking the axis labels.

  • javascript
  • //axisLabelClick event for chart
    
    $("#container").ejChart({
    
        axisLabelClick: function (args) {
                  //Do something
        }
       
    });

    Axes Label Rendering

    The axesLabelRendering event is triggered before rendering the labels. This event is triggered for each label in axis. You can use this event to add custom text to axis labels.

  • javascript
  • //axesLabelRendering event for chart
    
    $("#container").ejChart({
    
        axesLabelRendering: function (args) {
                //Do something
        }
       
    });

    Axis Label Mouse Move

    The axisLabelMouseMove event is triggered on moving mouse over the axis label.

  • javascript
  • //axisLabelMouseMove event for chart
    
    $("#container").ejChart({
    
        axisLabelMouseMove: function (args) {
                  //Do something
        }
       
    });

    Axes Labels Initialize

    The axesLabelsInitialize event is triggered during the initialization of axis labels.

  • javascript
  • //axesLabelsInitialize event for chart
    
    $("#container").ejChart({
    
        axesLabelsInitialize: function (args) {
                //Do something
        }
        
    });

    Axes Range Calculate

    The axesRangeCalculate event is triggered during axes range calculation.
    This event is triggered for each axis present in Chart. You can use this event to customize axis range as required.

  • javascript
  • //axesRangeCalculate event for chart
    
    $("#container").ejChart({
    
          axesRangeCalculate: function (args) {
                  //Do something
          }
          
    });

    Axes Title Rendering

    The axesTitleRendering event is triggered before rendering the axis title. This event is triggered for each axis with title. You can use this event to add custom text to axis title.

  • javascript
  • //axesTitleRendering event for chart
    
    $("#container").ejChart({
    
         axesTitleRendering: function (args) {
                 //Do something
         }
         
    });

    After Resize

    The afterResize event is triggered after the chart is resized

  • javascript
  • //afterResize event for chart
    
    $("#container").ejChart({
    
        afterResize: function (args) {
                  //Do something
        }
       
    });

    Before Resize

    The beforeResize event is triggered while the chart is changing.

  • javascript
  • //beforeResize event for chart
    
    $("#container").ejChart({
    
        beforeResize: function (args) {
                  //Do something
        }
       
    });

    Chart Click

    The chartClick event is triggered while clicking the chart

  • javascript
  • //chartClick event for chart
    
    $("#container").ejChart({
    
        chartClick: function (args) {
                  //Do something
        }
       
    });

    Chart Double Click

    The chartDoubleClick event is triggered on double clicking the chart.

  • javascript
  • //chartDoubleClick event for chart
    
    $("#container").ejChart({
    
        chartDoubleClick: function (args) {
                  //Do something
        }
       
    });

    Chart Mouse Move

    The chartMouseMove event is triggered while moving the mouse over the chart.

  • javascript
  • //chartMouseMove event for chart
    
    $("#container").ejChart({
    
        chartMouseMove: function (args) {
                  //Do something
        }
       
    });

    Chart Mouse Leave

    The chartMouseLeave event is triggered when the mouse pointer leaves the chart.

  • javascript
  • //chartMouseLeave event for chart
    
    $("#container").ejChart({
    
        chartMouseLeave: function (args) {
                  //Do something
        }
       
    });

    Chart Area Bounds Calculate

    The chartAreaBoundsCalculate event is triggered during the calculation of chart area bounds. You can use this event to customize the bounds of chart area.

  • javascript
  • //chartAreaBoundsCalculate event for chart
    
    $("#container").ejChart({
    
        chartAreaBoundsCalculate: function (args) {
                //Do something
        }
        
    });

    Create

    The create event is triggered after the chart is created.

  • javascript
  • //Create event for chart
    
    $("#container").ejChart({
    
         create: function (args) {
                 //Do something
         }
         
    });

    Drag Start

    The dragStart event is triggered when the dragging is started.

  • javascript
  • //Drag Start event for chart
    
    $("#container").ejChart({
    
        dragStart: function (args) {
                  //Do something
        }
       
    });

    Dragging

    The dragging event is triggered while dragging.

  • javascript
  • //Dragging event for chart
    
    $("#container").ejChart({
    
        dragging: function (args) {
                  //Do something
        }
       
    });

    Drag End

    The dragEnd event is triggered when the dragging is completed.

  • javascript
  • //DragEnd event for chart
    
    $("#container").ejChart({
    
        dragEnd: function (args) {
                  //Do something
        }
       
    });

    Destroy

    The destroy event is triggered when chart is destroyed completely.

  • javascript
  • //Destroy event for chart
    
    $("#container").ejChart({
    
         destroy: function (args) {
                 //Do something
         }
         
    });

    Display Text Rendering

    The displayTextRendering event is triggered before rendering the data labels.
    This event is triggered for each data label in the series. You can use this event to add custom text in data labels.

  • javascript
  • //displayTextRendering event for chart
    
    $("#container").ejChart({
    
        displayTextRendering: function (args) {
                 //Do something
        }
    	
    });

    Error Bar Rendering

    The errorBarRendering event is triggered when the error bar is rendering.

  • javascript
  • //errorBarRendering event for chart
    
    $("#container").ejChart({
    
        errorBarRendering: function (args) {
                  //Do something
        }
       
    });

    Legend Bounds Calculate

    The legendBoundsCalculate event is triggered during the calculation of legend bounds.
    You can use this event to customize the bounds of legend.

  • javascript
  • //legendBoundsCalculate event for chart
    
    $("#container").ejChart({
    
         legendBoundsCalculate: function (args) {
                  //Do something
         }
         
    });

    Legend Item Click

    The legendItemClick event is triggered on clicking the legend item.

  • javascript
  • //legendItemClick event for chart
    
    $("#container").ejChart({
    
         legendItemClick: function (args) {
                  //Do something
         }
         
    });

    Legend Item Mouse Move

    The legendItemMouseMove event is triggered when moving mouse over legend item. You can use this event for hit testing on legend items.

  • javascript
  • //legendItemMouseMove event for chart
    
    $("#container").ejChart({
    
        legendItemMouseMove: function (args) {
                 //Do something
        }
        
    });

    Legend Item Rendering

    The legendItemRendering event is triggered before rendering the legend item. This event is fired for each legend item in Chart.
    You can use this event to customize legend item shape or add custom text to legend item.

  • javascript
  • //legendItemRendering event for chart
    
    $("#container").ejChart({
    
        legendItemRendering: function (args) {
                //Do something
        }
        
    });

    Load

    The load event is triggered before loading the chart.

  • javascript
  • //load event for chart
    
    $("#container").ejChart({
    
        load: function (args) {
                 //Do something
        }
        
    });

    Multi Level Label Click

    The multiLevelLabelClick event is triggered on the clicking the Multi level labels of the chart .

  • javascript
  • //MultilevelLabelsClick event for chart
    
    $("#container").ejChart({
    
        multiLevelLabelClick: function (args) {
                  //Do something
        }
       
    });

    Multi Level Label Rendering

    The multiLevelLabelRendering event is triggered when multi level labels are rendering.

  • javascript
  • //multi level labels rendering event for chart
    
    $("#container").ejChart({
    
      multiLevelLabelRendering: function (args) {
                  //Do something
        }
       
    });

    Point Region Click

    The pointRegionClick event is triggered on clicking a point in chart. You can use this event to handle clicks made on points.

  • javascript
  • //pointRegionClick event for chart
    
    $("#container").ejChart({
    
        pointRegionClick: function (args) {
                 //Do something
        }
        
    });

    Point Region Mouse Move

    The pointRegionMouseMove event is triggered when mouse is moved over a point.

  • javascript
  • //pointRegionMouseMove event for chart
    
    $("#container").ejChart({
    
        pointRegionMouseMove: function (args) {
                      //Do something
        }
       
    });

    Pre Render

    The preRender event is triggered before rendering the chart.

  • javascript
  • //preRender event for chart
    
    $("#container").ejChart({
    
        preRender: function (args) {
                  //Do something
        }
       
    });

    Range Selected

    The rangeSelected event is triggered after the data is selected in the chart

  • javascript
  • //rangeSelected event for chart
    
    $("#container").ejChart({
    
        rangeSelected: function (args) {
                 //Do something
        }
        
    });

    Series Region Click

    The seriesRegionClick event is triggered after selecting a series. This event is triggered after selecting a series only if selection mode is enabled in the series.

  • javascript
  • //series Region click event for chart
    
    $("#container").ejChart({
    
        seriesRegionClick: function (args) {
                  //Do something
        }
        
    });

    Series Rendering

    The seriesRendering event is triggered before rendering a series. This event is fired for each series in Chart.

  • javascript
  • //seriesRendering event for chart
    
    $("#container").ejChart({
    
        seriesRendering: function (args) {
                  //Do something
        }
        
    });

    Symbol Rendering

    The symbolRendering event is triggered before rendering the marker symbols. This event is triggered for each marker in Chart.

  • javascript
  • //symbolRendering event for chart
    
    $("#container").ejChart({
     
        symbolRendering: function (args) {
                  //Do something
        }
        
    });

    Trendline Rendering

    The trendlineRendering event is triggered when trendlines are rendering.

  • javascript
  • //trendline rendering event for chart
    
    $("#container").ejChart({
    
      trendlineRendering: function (args) {
                  //Do something
        }
       
    });

    Title Rendering

    The titleRendering event is triggered before rendering the Chart title. You can use this event to add custom text in Chart title.

  • javascript
  • //titleRendering event for chart
    
    $("#container").ejChart({
    
        titleRendering: function (args) {
                  //Do something
        }
        
    });

    Sub Title Rendering

    The subtitleRendering event is triggered before rendering the Chart Sub title.

  • javascript
  • //SubtitleRendering event for chart
    
    $("#container").ejChart({
    
        subTitleRendering: function (args) {
                  //Do something
        }
        
    });

    Tooltip Initialize

    The tooltipInitialize event is triggered before rendering the tooltip. This event is fired when tooltip is enabled and mouse is hovered on a Chart point. You can use this event to customize tooltip before rendering.

  • javascript
  • //toolTipInitialize event for chart
     
    $("#container").ejChart({
    
        toolTipInitialize: function (args) {
                  //Do something
        }
        
    });

    Track Axis Tooltip

    The trackAxisTooltip event is triggered before rendering crosshair tooltip in axis. This event is fired for each axis with crosshair label enabled. You can use this event to customize crosshair label before rendering

  • javascript
  • //trackAxisToolTip event for chart
    
    $("#container").ejChart({
    
        trackAxisToolTip: function (args) {
                  //Do something
        }
        
    });

    Track tooltip

    The trackTooltip event is triggered before rendering trackball tooltip. This event is fired for each series in Chart because trackball tooltip is displayed for all the series. You can use this event to customize the text displayed in trackball tooltip.

  • javascript
  • //trackToolTip event for chart
    
    $("#container").ejChart({
    
        trackToolTip: function (args) {
                  //Do something
        }
       
    });

    Scroll Start

    The scrollStart event is triggered when scroll starts.

  • javascript
  • //scroll start event for chart
    
    $("#container").ejChart({
    
       scrollStart: function (args) {}
    
    });

    Scroll End

    The scrollEnd event is triggered after scrolling is completed.

  • javascript
  • //Scroll End event for chart
    $("#container").ejChart({
    
       scrollEnd: function (args) {}
    
    });

    Scroll Changed

    The scrollChanged event is triggered after the scrollbar position is changed.

  • javascript
  • //scrollbarChanged event for chart
    
    $("#container").ejChart({
    
       scrollChanged: function (args) {}
    });

    Zoomed

    The zoomed event is triggered after zooming the chart while using the rectangle zooming.

  • javascript
  • //zoomed event for chart
    
    $("#container").ejChart({
    
        zoomed: function (args) {
                //Do something
        }
       
    });