Display Currency symbol in mixed (Bar and Line) Chart on ToolTip using ChartJS in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

In y-axis-1 my data is like this : 160000, but I want to display it as 1,60,000

In y-axis-2 my data is like this: 9400000, but I want to display it as

₹94,00,000

I don't want chart legend

At the same time, when the line and bar chart interfere at a place, I want display the data with comma and INR symbols same as mentioned above.

<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css" /> 
<canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%" chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride" style="margin-top:12%"></canvas>

 

    //Mixed chart
    $scope.months = null;
    $http.get(apiUrl + "/api/Warehouse/GetMonthDetails")
   .then(function (response) {
       $scope.months = JSON.parse(response.data);
       $scope.options = {
           //multiTooltipTemplate: function (label) {
           //    return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
           //},
           title: {
               display: true,
               text: 'Quantity v/s Value(in months)',
               fontSize: 18,
               position: 'bottom'
           },
           scales: {
               yAxes: [
                 {
                     id: 'y-axis-1',
                     type: 'linear',
                     display: true,
                     position: 'left'
                 },
                 {
                     id: 'y-axis-2',
                     type: 'linear',
                     display: true,
                     position: 'right'
                 }
               ]
           },
           type: 'horizontalBar'
       }
       $scope.colors = ['#00ADF9', '#949FB1'];
       $scope.labels = [];
       var qty = [];
       var value = [];
       for (var i = 0; i < $scope.months.length; i++) {
           if ($scope.months[i].Qty != 0 && $scope.months[i].Value != 0) {
               $scope.labels.push($scope.months[i].MonthName);
               qty.push($scope.months[i].Qty);
               value.push($scope.months[i].Value);
           }
       }
       $scope.data = [qty, value];
       $scope.datasetOverride = [
     {
         label: "Quantity",
         borderWidth: 1,
         type: 'bar',
         yAxisID: 'y-axis-1'
     },
     {
         label: "Value",
         borderWidth: 3,
         hoverBackgroundColor: "rgba(255,99,132,0.4)",
         hoverBorderColor: "rgba(255,99,132,1)",
         type: 'line',
         yAxisID: 'y-axis-2'
     }
       ];
   })

 

        [HttpGet]
        [ActionName("GetMonthDetails")]
        public string GetMonthWise()
        {
            SqlConnection myConnection = new SqlConnection();
            myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionStringL"].ConnectionString;
            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.CommandType = CommandType.StoredProcedure;
            sqlCmd.CommandText = "REPORT_WH_DASHBOARD";
            sqlCmd.Connection = myConnection;
            SqlDataAdapter sda = new SqlDataAdapter(sqlCmd);
            DataSet ds = new DataSet();
            string jsonString = string.Empty;
            myConnection.Open();
            sda.Fill(ds);
            myConnection.Close();
            jsonString = JsonConvert.SerializeObject(ds.Tables[5]);
            return jsonString;
        }
Posted one month ago Modified on one month ago

Hi skp,

Check this example. Now please take its reference and correct your code.

For number format refer below link.

Intl.NumberFormat

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["chart.js"]);
        app.controller("MyController", function ($scope) {
            $scope.months = [];
            $scope.months.push({ MonthName: 'Jan', Qty: 1860000, Value: 1940000 });
            $scope.months.push({ MonthName: 'Feb', Qty: 1850000, Value: 1960000 });
            $scope.months.push({ MonthName: 'Mar', Qty: 1840000, Value: 1680000 });
            $scope.months.push({ MonthName: 'Apr', Qty: 1820000, Value: 1700000 });
            $scope.months.push({ MonthName: 'May', Qty: 1830000, Value: 1930000 });
            $scope.months.push({ MonthName: 'Jun', Qty: 1800000, Value: 1540000 });
            $scope.months.push({ MonthName: 'Jul', Qty: 1810000, Value: 1960000 });

            $scope.colors = ['#00ADF9', '#949FB1'];
            $scope.labels = [];
            var qty = [];
            var value = [];
            for (var i = 0; i < $scope.months.length; i++) {
                if ($scope.months[i].Qty != 0 && $scope.months[i].Value != 0) {
                    $scope.labels.push($scope.months[i].MonthName);
                    qty.push($scope.months[i].Qty);
                    value.push($scope.months[i].Value);
                }
            }
            $scope.data = [qty, value];
            var i = 0;
            $scope.options = {
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';

                            var datasetValueINR = new Intl.NumberFormat('en-IN', {
                                maximumSignificantDigits: 3,
                                style: 'currency',
                                currency: 'INR'
                            }).format(tooltipItem.yLabel);

                            var datasetValue = new Intl.NumberFormat('en-IN', {
                                maximumSignificantDigits: 3
                            }).format(tooltipItem.yLabel);

                            if (datasetLabel == 'Quantity') {
                                return datasetLabel + ' : ' + datasetValue;
                            } else if (datasetLabel == 'Value') {
                                return datasetLabel + ' : ' + datasetValueINR;
                            }
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'Quantity v/s Value(in months)',
                    fontSize: 18,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        id: 'y-axis-1',
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }, {
                        id: 'y-axis-2',
                        type: 'linear',
                        display: true,
                        position: 'right'
                    }]
                }
            }
            $scope.datasetOverride = [{
                label: "Quantity",
                borderWidth: 1,
                type: 'bar',
                yAxisID: 'y-axis-1'
            }, {
                label: "Value",
                borderWidth: 3,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                type: 'line',
                yAxisID: 'y-axis-2'
            }];
        });
    </script>
    <canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%"
        chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride"
        style="margin-top: 12%"></canvas>
</body>
</html>

Demo