Canvas Js Write Different Value On Each Bar C# Mvc

Question

How can I write different values inside and outside of each bar ?

Sample Data

for single bar is something like

X=21538, Y=25666 , Name = 'July'

Now the graph should render like this

Expected

Current

Class

   public class DataPoint
 {
    public DataPoint(string label, double y)
    {
        this.Label = label;
        this.Y = y;
     
       // this.X = x;
    }

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "label")]
    public string Label = "";




    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> Y = null;


}

Also when I try to use x as another point the graph shows abnormal result. Please help.

Answer 1

The solution to this problem I found is.

 var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
    text: '@(Model.topTitleChart)'
},
axisY: {
    title:  '@(Model.leftTitleChart)'
},

data: [{
    type: "column",
    indexLabel: "{innerValue}",
    indexLabelPlacement: "inside",
    dataPoints: @Html.Raw(Model.dataPoints)
}]
        });
addIndexLabel();
chart.render();
function addIndexLabel() {
    chart.options.data.push({ type: "scatter", color: "transparent", toolTipContent: null, dataPoints: [] });
    for (var i = 0; i < chart.options.data[0].dataPoints.length; i++)
        chart.options.data[1].dataPoints.push({ x: chart.options.data[0].dataPoints[i].x, y: chart.options.data[0].dataPoints[i].y, indexLabel: chart.options.data[0].dataPoints[i].outerValue });
}

Class

  [DataContract]
   public class DataPoint
   {
      public DataPoint(string x, double y,string innerval,string outerval)
      {
        this.label = x;
        this.y = y;
        this.innerValue = innerval;
        this.outerValue = outerval;


       // this.X = x;
    }

    [DataMember(Name = "label")]
    public string label { get; set; }

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> y = null;

    [DataMember(Name = "outerValue")]
    public string outerValue { get; set; }

    [DataMember(Name = "innerValue")]
    public string innerValue { get; set; }


}

Result