Appearance in MVC Chart component
19 Dec 202424 minutes to read
Chart theme customization
You can customize the default theme of the chart Theme
property. There are 9 themes available. They are, Material
, Fabric
, Bootstrap
, HighContrastLight
, MaterialDark
, FabricDark
, HighContrast
, BootstrapDark
and Bootstrap4
.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Theme("HighContrast").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Custom color palette
You can customize the default color of series or points by providing a custom color palette of your choice by using the Palettes
property.
@(Html.EJS().Chart("container").Title("Olympic Medal Counts - RIO").PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("silver").
DataSource(ViewBag.dataSource).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("bronze").
DataSource(ViewBag.dataSource).Add();
}).
Palettes(ViewBag.palletes).Render()
)
public ActionResult Index()
{
var palette = new string[] { "#E94649", "#F6B53F", "#6FAAB0" };
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
};
ViewBag.dataSource = chartData;
ViewBag.palletes = palette;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
public double silver;
public double bronze;
}
Data point customization
The color of individual data point or data points within a range can be customized using the options below.
Point color mapping
You can bind the color for the points from DataSource
for the series using PointColorMapping
property.
@(Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y").CornerRadius(cr => cr.TopLeft(10).TopRight(10)).
DataSource(ViewBag.dataSource).PointColorMapping("color").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))).PrimaryYAxis(py => py.LineStyle(mg => mg.Width(0)).MajorTickLines(mg => mg.Width(0)).MinorTickLines(mg => mg.Width(0)).LabelFormat("{value}°C"))
.Title("USA CLIMATE - WEATHER BY MONTH").ChartArea(area => area.Border(br => br.Width(0))).Render()
)
public IActionResult Index()
{
List<RangeColorMappingData> chartData = new List<RangeColorMappingData>
{
new RangeColorMappingData { x= "Jan", y= 6.96, color= "red" },
new RangeColorMappingData { x= "Feb", y= 8.9, color = "blue" },
new RangeColorMappingData { x= "Mar", y= 12, color = "orange" },
new RangeColorMappingData { x= "Apr", y= 17.5, color = "aqua" },
new RangeColorMappingData { x= "May", y= 22.1, color = "grey" }
};
ViewBag.dataSource = chartData;
return View();
}
public class RangeColorMappingData
{
public string x;
public double y;
public string color;
}
Range color mapping
You can differentiate data points based on their y values using RangeColorSettings
in the chart.
@(Html.EJS().Chart("container").SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Point).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("x").YName("y").CornerRadius(cr => cr.TopLeft(10).TopRight(10)).
DataSource(ViewBag.dataSource).Name("USA").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))).PrimaryYAxis(py => py.LineStyle(mg => mg.Width(0)).MajorTickLines(mg => mg.Width(0)).MinorTickLines(mg => mg.Width(0)).LabelFormat("{value}°C")).LegendSettings(legend => legend.Mode(Syncfusion.EJ2.Charts.LegendMode.Range)
.Visible(true).ToggleVisibility(false)).RangeColorSettings(ranges =>
{
ranges.Label("1°C to 10°C").Start(1).End(10).Colors(ViewBag.color1).Add();
ranges.Label("11°C to 20°C").Start(11).End(20).Colors(ViewBag.color2).Add();
ranges.Label("21°C to 30°C").Start(21).End(30).Colors(ViewBag.color3).Add();
}).Title("USA CLIMATE - WEATHER BY MONTH").ChartArea(area => area.Border(br => br.Width(0))).Render()
)
public IActionResult Index()
{
string[] color1 = { "#F9D422" };
string[] color2 = { "#F28F3F" };
string[] color3 = { "#E94F53" };
List<RangeColorMappingData> chartData = new List<RangeColorMappingData>
{
new RangeColorMappingData { x= "Jan", y= 6.96},
new RangeColorMappingData { x= "Feb", y= 8.9},
new RangeColorMappingData { x= "Mar", y= 12},
new RangeColorMappingData { x= "Apr", y= 17.5},
new RangeColorMappingData { x= "May", y= 22.1},
new RangeColorMappingData { x= "June", y= 25},
new RangeColorMappingData { x= "July", y= 29.4},
new RangeColorMappingData { x= "Aug", y= 29.6},
new RangeColorMappingData { x= "Sep", y= 25.8},
new RangeColorMappingData { x= "Oct", y= 21.1},
new RangeColorMappingData { x= "Nov", y= 15.5},
new RangeColorMappingData { x= "Dec", y= 9.9}
};
ViewBag.dataSource = chartData;
ViewBag.color1 = color1;
ViewBag.color2 = color2;
ViewBag.color3 = color3;
return View();
}
public class RangeColorMappingData
{
public string x;
public double y;
}
Point level customization
Marker, datalabel and fill color of each data point can be customized with PointRender
and TextRender
event.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").PointRender("point").Render()
}
<script>
function point(args) {
args.fill = colors[args.point.index];
}
</script>
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Chart area customization
Customize the chart background
Using Background
and Border
properties, you can change the background color and border of the chart.
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Chart margin
You can set margin for chart from its container through Margin
property.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Width(2).Add();
}).
Margin(ViewBag.margin)
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Chart area customization
Using Background
and Border
properties, you can change the background color and border of the chart area. Width for the chart area can be customized using Width
property.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
ChartArea(ca => ca.Background('skyblue').Width('90%')).
Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Chart area margin
You can customize the space between the chart area from its chart container through Margin
property.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
ChartArea(ca => ca.Border(br => br.Width(2).Color("blue")).
Margin(mar => mar.Top(50).Bottom(50).Left(50).Right(50))).
Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Animation
You can customize animation for a particular series using Animation
property. You can enable or disable animation of the series using Enable
property, Duration
specifies the duration of an animation and Delay
allows us to start the animation at desire time.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Fluid animation
Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [Animate
] method.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
.CornerRadius(cr=>cr.BottomLeft(10).BottomRight(10).TopLeft(10).TopRight(10))
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Width(2).Add();
}).
PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Render()
<script>
var count = 0;
var loaded = function (args) {
args.chart.loaded = null;
setInterval(
function () {
if (count === 0) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 206, text: 'Bangaladesh' },
{ x: 'Misc', y: 123, text: 'Bhutn' },
{ x: 'Fish', y: 48, text: 'Nepal' },
{ x: 'Egg', y: 240, text: 'Thiland' },
{ x: 'Fruits', y: 170, text: 'Malaysia' }
];
args.chart.animate();
count++;
}
else if (count === 1) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 86, text: 'Bangaladesh' },
{ x: 'Misc', y: 173, text: 'Bhutn' },
{ x: 'Fish', y: 188, text: 'Nepal' },
{ x: 'Egg', y: 109, text: 'Thiland' },
{ x: 'Fruits', y: 100, text: 'Malaysia' }
];
args.chart.animate();
count++;
}
else if (count === 2) {
args.chart.series[0].dataSource = [
{ x: 'Tea', y: 156, text: 'Bangaladesh' },
{ x: 'Misc', y: 33, text: 'Bhutn' },
{ x: 'Fish', y: 260, text: 'Nepal' },
{ x: 'Egg', y: 200, text: 'Thiland' },
{ x: 'Fruits', y: 30, text: 'Malaysia' }
];
args.chart.animate();
count = 0;
}
}, 2000);
}
</script>
}
public IActionResult Index()
{
List<RoundedColumnChartData> chartData = new List<RoundedColumnChartData>
{
new RoundedColumnChartData { x= "BGD", y= 106, text= "Bangaladesh" },
new RoundedColumnChartData { x= "BTN", y= 103, text= "Bhutn" },
new RoundedColumnChartData { x= "NPL", y= 198, text= "Nepal" },
new RoundedColumnChartData { x= "THA", y= 189, text= "Thiland" },
new RoundedColumnChartData { x= "MYS", y= 250, text= "Malaysia" }
};
ViewBag.dataSource = chartData;
ViewBag.font = new { fontWeight = "600", color = "#ffffff" };
return View();
}
public class RoundedColumnChartData
{
public string x;
public double y;
public string text;
}
Chart title
Chart can be given a title using Title
property, to show the information about the data plotted.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("x").
YName("yValue").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").TitleStyle(ViewBag.style).Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Title position
By using the Position
property in TitleStyle
, you can position the Title
at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
Marker(ViewBag.Marker).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").TitleStyle(tl=>tl.Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom)).Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
The custom option helps you to position the title anywhere in the chart using X
and Y
coordinates.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").TitleStyle(tl=>tl.Position(Syncfusion.EJ2.Charts.TitlePosition.Custom).X(300).Y(60)).Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Title alignment
You can align the title to the near, far, or center of the chart using the TextAlignment
property.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO").TitleStyle(tl=>tl.Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom).TextAlignment(Syncfusion.EJ2.Charts.Alignment.Far)).Render()
public IActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}
Chart subTitle
Chart can be given a subtitle using SubTitle
property, to show the information about the data plotted.
@(Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).
Name("Gold").
Width(2).Add();
}).
PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
Title("Olympic Medal Counts - RIO")
.SubTitle("(1975-2010)")
.Render()
)
public ActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ country= "USA", gold=50 },
new ColumnChartData{ country="China", gold=40 },
new ColumnChartData{ country= "Japan", gold=70 },
new ColumnChartData{ country= "Australia", gold=60},
new ColumnChartData{ country= "France", gold=50 },
new ColumnChartData{ country= "Germany", gold=40 },
new ColumnChartData{ country= "Italy", gold=40 },
new ColumnChartData{ country= "Sweden", gold=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string country;
public double gold;
}