1
Answer

How to show different text on mouse over/tool tip on chart

mohammad qasim

mohammad qasim
4y
600
1
Hi,
i am working with chart,every thing is fine.
Requirements:
How can i show different text on mouse over / tool tip , i have text array on "tooltiptext" which i want to show on tool tip accordingly
My code:
  1. function onsuccessBindchart(response) {  
  2. //alert('yes');  
  3. if (response.d.length > 0) {  
  4. var dataarray = [];  
  5. var datapending = [];  
  6. var datareject = [];  
  7. var datalabel = [];//['Approved', 'Pending', 'Rejected'];  
  8. var mycolor = ['#5cb85c', '#f0ad4e', '#9C27B0'];  
  9. var tooltiptext=[];  
  10. for (var i = 0; i < response.d.length; i++) {  
  11. console.log(response.d[i].DepartName);  
  12. // dataarray.push({ name:response.d[i].DepartName + '( ' + response.d[i].totaldocs + ' )', data: [response.d[i].pendingdocs, response.d[i].approveddocs, response.d[i].rejecteddocs] });  
  13. dataarray.push(response.d[i].approveddocs);  
  14. datapending.push(response.d[i].pendingdocs);  
  15. datareject.push(response.d[i].rejecteddocs);  
  16. datalabel.push(response.d[i].DepartName + ' ( ' + response.d[i].totaldocs + ' )');  
  17. tooltiptext.push(response.d[i].ShowDepartNamechart);  
  18. }  
  19. new Vue({  
  20. el: '#app',  
  21. components: {  
  22. apexchart: VueApexCharts,  
  23. },  
  24. data: {  
  25. series: dataarray,  
  26. series: [{  
  27. name: 'Approved',  
  28. data: dataarray,  
  29. //colors: mycolor[0]  
  30. }, {  
  31. name: 'Pending',  
  32. data: datapending,  
  33. // colors: mycolor[1]  
  34. }, {  
  35. name: 'Rejected',  
  36. data: datareject,  
  37. // colors: mycolor[2]  
  38. }],  
  39. chartOptions: {  
  40. colors: mycolor,  
  41. chart: {  
  42. type: 'bar',  
  43. height: 350,  
  44. stacked: true,  
  45. },  
  46. plotOptions: {  
  47. bar: {  
  48. horizontal: false,  
  49. vertical:true,  
  50. },  
  51. },  
  52. stroke: {  
  53. width: 1,  
  54. colors: ['#fff']  
  55. },  
  56. title: {  
  57. text: 'Publication Grid', align: 'center', style: {  
  58. fontSize: '14px',  
  59. fontWeight: 'bold',  
  60. fontFamily: undefined,  
  61. color: '#263238'  
  62. },  
  63. },  
  64. xaxis: {  
  65. categories: datalabel,  
  66. labels: {  
  67. formatter: function (val) {  
  68. return val  
  69. }  
  70. }  
  71. },  
  72. yaxis: {  
  73. title: {  
  74. text: ''  
  75. },  
  76. },  
  77. //tooltip: {  
  78. // y: {  
  79. // formatter: function (val) {  
  80. // return val;  
  81. // }  
  82. // }  
  83. //}  
  84. tooltip: {  
  85. enabled: true,  
  86. y: {  
  87. formatter: function (val) {  
  88. return val  
  89. },  
  90. title: {  
  91. formatter: function (tooltiptext) {  
  92. return ''  
  93. }  
  94. }  
  95. }  
  96. }  
  97. ,  
  98. fill: {  
  99. opacity: 1,  
  100. //colors: ['##5cb85c', '##f0ad4e', '#9C27B0'],  
  101. },  
  102. legend: {  
  103. position: 'top',  
  104. horizontalAlign: 'center',  
  105. offsetX: 40  
  106. },  
  107. },  
  108. },  
  109. })  
  110. }  
  111. } 
 
Answers (1)
Next Recommended Forum