User interactions

Tooltip

Enable tooltips for data points

Tooltips for the data points can be enabled by using the “visible” option of the e-chart-tooltip property under “e-common-series-options” in the pivot chart.

  • cshtml
  • <ej-pivot-chart id="PivotChart1">
        //Enabling tooltip of data point
        <e-common-series-options>
            <e-chart-tooltip visible="true"></e-chart-tooltip>
        </e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>

    Tooltip in ASP NET Core pivot chart control

    Tooltip template

    HTML elements can be displayed in the tooltip by using the tooltip-template option. The template option takes the value of the “id” attribute from the HTML element. You can use the #point.x# and #point.y# as place holders in the HTML element to display the X and Y values of the corresponding data points.

  • cshtml
  • <div id="Tooltip" style="display: none;">
        <div id="icon">
            <div id="ccicon"> </div>
        </div>
        <div id="value">
            <div>
                <label id="ccvalue">&nbsp;#point.y# </label>
                <label id="cc">Customer Count </label>
            </div>
        </div>
    </div>
    <ej-pivot-chart id="PivotChart1">
        <e-common-series-options>
            <e-chart-tooltip visible="false" tooltip-template="Tooltip"></e-chart-tooltip>
        </e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>

    Tooltip template in ASP NET Core pivot chart control

    Tooltip customization

    By using the fill and border properties of the tooltip, you can customize its background color, border color, and border width.

  • cshtml
  • <ej-pivot-chart id="PivotChart1">
        <e-common-series-options>
            <e-chart-tooltip visible="false" tooltip-fill="#FF9933" tooltip-border-width="1" tooltip-border-color="#993300"></e-chart-tooltip>
        </e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>

    Tooltip customization in ASP NET Core pivot chart control

    Tooltip with rounded corners

    The tooltip properties rx and ry are used to customize its corner radius.

  • cshtml
  • <ej-pivot-chart id="PivotChart1">
        //Customize the corner radius of the tooltip rectangle.
        <e-common-series-options>
            <e-chart-tooltip visible="false" tooltip-rx="50" tooltip-ry="50"></e-chart-tooltip>
        </e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>

    Tooltip with rounded corners in ASP NET Core pivot chart control

    Marker and crosshair

    Marker shape customization

    In the pivot chart, you can customize the marker shape with the following symbols:

    • Rectangle
    • Circle
    • Cross
    • Diamond
    • Pentagon
    • Hexagon
    • Star
    • Ellipse
    • Triangle etc.
  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Line"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++)
                this.model.series[seriescount].marker.shape = "Triangle";
        }
    </script>

    Marker customization in ASP NET Core pivot chart control

    Highlight

    The pivot chart provides highlighting support for the series and data points by hovering the mouse. To enable highlighting, set the “enable” property to true in the highlightSettings of the series.

  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++)
                this.model.series[seriescount].highlightSettings.enable = true
        }
    </script>

    Highlight mode

    You can set three different modes for highlighting data points and series by using the mode property of the highlightSettings.

    • series
    • points
    • cluster
  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].highlightSettings.enable = true
                this.model.series[seriescount].highlightSettings.mode = "series";
            }
        }
    </script>

    Highlight mode in ASP NET Core pivot chart control

    Customize the highlight styles

    To customize the highlighted series, use the border.color, border.width, and opacity options in the highlightSettings property.

  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].highlightSettings.enable = true
                this.model.series[seriescount].highlightSettings.opacity = "0.5";
                this.model.series[seriescount].highlightSettings.border.width = "1.5";
                this.model.series[seriescount].highlightSettings.border.color = "red";
            }
        }
    </script>

    Highlight style in ASP NET Core pivot chart control

    Patterns to highlight

    The pivot chart provides pattern support for highlighting the data by setting an appropriate value to the pattern property of the highlightSettings. The different types of highlight patterns are as follows:

    • chessboard
    • crosshatch
    • dots
    • pacman
    • grid
    • turquoise
    • star
    • triangle
    • circle
    • tile
    • horizontalDash
    • verticalDash
    • rectangle
    • box
    • verticalStripe
    • horizontalStripe
    • bubble
    • diagonalBackward
    • diagonalForward
  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].highlightSettings.enable = true
                this.model.series[seriescount].highlightSettings.pattern = "chessboard";
            }
        }
    </script>

    Highlight settings in ASP NET Core pivot chart control

    Selection

    The pivot chart provides selection support for series and data points by clicking the mouse. To enable selection, set the “enable” property to true in the selectionSettings of the series.

  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].selectionSettings.enable = true;
            }
        }
    </script>

    Selection mode

    You can set three different selection modes for highlighting the data points and series by using the mode property of the selectionSettings.

    • series
    • points
    • cluster
  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].selectionSettings.enable = true;
                this.model.series[seriescount].selectionSettings.mode = "series";
            }
        }
    </script>

    Selection mode in ASP NET Core pivot chart control

    Customize the selection styles

    To customize the selection styles, use the border.color, border.width, and opacity options in the selectionSettings.

  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].selectionSettings.enable = true;
                this.model.series[seriescount].selectionSettings.border.width = "1.5";
                this.model.series[seriescount].selectionSettings.border.color = "red";
            }
        }
    </script>

    Selection style in ASP NET Core pivot chart control

    Patterns for selection

    The pivot chart provides pattern support for selecting data by setting an appropriate value to the pattern property of the selectionSettings. The different types of selection patterns are as follows:

    • chessboard
    • crosshatch
    • dots
    • pacman
    • grid
    • turquoise
    • star
    • triangle
    • circle
    • tile
    • horizontalDash
    • verticalDash
    • rectangle
    • box
    • verticalStripe
    • horizontalStripe
    • bubble
    • diagonalBackward
    • diagonalForward
  • cshtml
  • <ej-pivot-chart id="PivotChart1" series-rendering="onSeriesRenders">
        <e-common-series-options type="Column"></e-common-series-options>
        <e-size width="950px" height="460px"></e-size>
    </ej-pivot-chart>
    <script type="text/javascript">
        function onSeriesRenders(args) {
            for (var seriescount = 0; seriescount < this.model.series.length; seriescount++) {
                this.model.series[seriescount].selectionSettings.enable = true
                this.model.series[seriescount].selectionSettings.pattern = "chessboard";
            }
        }
    </script>

    Selection settings in ASP NET Core pivot chart control