Hi rani,

For exporting to different format HighChart has the inbuilt functionality. You need to include exporting module.

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

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Namespaces

using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;

Controller

public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
    return View();
}

[HttpPost]
public JsonResult GetChartData()
{
    string query = "SELECT ShipCountry, DATEPART(Year, OrderDate) [Year], COUNT(OrderId) [Total]";
    query += " FROM Orders WHERE ShipCountry IN ('USA', 'France', 'Brazil', 'Canada')";
    query += " GROUP BY ShipCountry, DATEPART(Year, OrderDate)";

    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    DataTable dt = new DataTable();
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
        {
            sda.Fill(dt);
        }
    }

    List<string> countries = (from p in dt.AsEnumerable()
                                select Convert.ToString(p["ShipCountry"])).Distinct().ToList();

    List<int> years = (from p in dt.AsEnumerable()
                        select Convert.ToInt32(p["Year"])).Distinct().ToList();

    ChartData chartData = new ChartData();
    chartData.Category = years.ToArray();
    List<Series> ser = new List<Series>();
    foreach (string country in countries)
    {
        Series series = new Series();
        List<int> data = new List<int>();
        foreach (int year in years)
        {
            int total = (from p in dt.AsEnumerable()
                            where Convert.ToInt32(p["Year"]) == year && p["ShipCountry"].ToString() == country.Trim()
                            select Convert.ToInt32(p["Total"])).FirstOrDefault();

            data.Add(total);
        }
        series.name = country;
        series.data = data.ToArray();
        ser.Add(series);
    }
    chartData.Series = ser;
    return Json(chartData);
}

public class ChartData
{
    public int[] Category { get; set; }
    public List<Series> Series { get; set; }
}

public class Series
{
    public string name { get; set; }
    public int[] data { get; set; }
}

View

<div ng-app="MyApp" ng-controller="MyController">
    <div id="chart">
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $http.post("Home/GetChartData", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            var category = response.data.Category;
            var series = response.data.Series;
            Highcharts.chart('chart', {
                chart: { type: 'bar' },
                title: { text: 'Country wise Order Distribution' },
                subtitle: { text: 'Order Distribution' },
                xAxis: {
                    categories: category,
                    title: { text: null }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Count',
                        align: 'high'
                    },
                    labels: { overflow: 'justify' }
                },
                tooltip: { valueSuffix: '' },
                plotOptions: {
                    bar: { dataLabels: { enabled: true} },
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    var seriesName = e.point.series.name;
                                    var category = e.point.category;
                                    var value = e.point.y;
                                    alert('Country : ' + seriesName +
                                            '\nYear : ' + category +
                                            '\nValue : ' + value);
                                }
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 80,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                    shadow: true
                },
                credits: { enabled: false },
                series: series
            });
        }, function (response) {
            $window.alert(response.responseText);
        });
    });
</script>

Screenshot