CODEWITHSUNDEEP
angularjsinfragisticsigdatachart
Haris KK
Haris KK

Reputation: 267

Infragistics igDataChart in AngularJS

Here i am using infragistics data chart in my Angular Js (1.4) application.. The tool top showing point values are not coming up , and how can show legend to describe what each series is for ?

Here is my sample HTML : 

     <div id="lineLegend" style="float: left"></div>
                    <ig-data-chart id="datachart1" 
                     data-source="ctrl.dataChart" auto-margin-height="12"  legend="{ element: "legend" }" >
        <axes>
            <axis name="NameAxis"
                    type="categoryX"
                    title="Country"
                    label="Day"></axis>

            <axis name="PopulationAxis"
                    type="numericY"
                    minimumvalue="0"
                    ></axis>   

        </axes>
        <series>
            <series name="Systolic"
                    type="area" 
                      showTooltip ="true"

                    is-highlighting-enabled="true"
                    is-transition-in-enabled="true"
                    x-axis="NameAxis"
                    y-axis="PopulationAxis"
                    value-member-path="Systolic">
            </series>     
            <series name="Diastolic"
                    type="area" 
                      showTooltip ="true"

                    is-highlighting-enabled="true"
                    is-transition-in-enabled="true"
                    x-axis="NameAxis"
                    trendLineBrush: "#000"
                    y-axis="PopulationAxis"
                    value-member-path="Diastolic">
            </series>  

        </series>

    </ig-data-chart>

Ctrl 

  vm.dataChart =   [
                    { "Day": "Mon", "Systolic": 80, "Diastolic": 100  },
                    { "Day": "Tue", "Systolic": 10, "Diastolic": 30  },
                    { "Day": "Wed", "Systolic": 266, "Diastolic": 295  },
                    { "Day": "Thu", "Systolic": 397, "Diastolic": 229 },
                    { "Day": "Fri", "Systolic": 161, "Diastolic": 300  },
                    { "Day": "Sat", "Systolic": 61, "Diastolic": 130  },
                    { "Day": "Sun", "Systolic": 361, "Diastolic": 30  },

                ];

Upvotes: 1

Views: 84

Answers (1)

dkamburov
dkamburov

Reputation: 394

Make sure you have defined all the properties correctly:

showTooltip="true"

should be

show-tooltip="true"

Upvotes: 2

Related Questions