DevExpress dashboard control - Show text on bar chart axis labels

Question

I have a bar chart control inside a DevExpress dashboard control which looks like this

 g text { font-weight: bold !important; } 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill="none" stroke="none" stroke-width="0" class="dxc dxc-chart" style="line-height:normal;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="798" height="516" onclick="void(0)" direction="ltr"> <defs> <clipPath id="DevExpress_14"> <rect x="22" y="10" width="754" height="484" transform="translate(0,0)"></rect> </clipPath> <pattern id="DevExpress_15" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_16" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_17" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_18" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_19" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_20" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_21" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_22" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_23" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_24" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_25" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_26" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_27" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_28" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <clipPath id="DevExpress_29"> <rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect> </clipPath> <clipPath id="DevExpress_30"> <rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect> </clipPath> </defs> <rect x="22" y="10" width="754" height="484" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect> <g class="dxc-background"></g> <g class="dxc-strips-group"> <g class="dxc-arg-strips" clip-path="url(#DevExpress_29)"></g> <g class="dxc-val-strips" clip-path="url(#DevExpress_29)"></g> </g> <g class="dxc-grids-group"> <g class="dxc-val-grid"> <path d="M 87 431 L 776 431" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 395 L 776 395" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 358 L 776 358" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 321 L 776 321" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 285 L 776 285" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 248 L 776 248" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 212 L 776 212" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 175 L 776 175" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 138 L 776 138" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 102 L 776 102" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 65 L 776 65" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 28 L 776 28" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> </g> <g class="dxc-arg-grid"></g> </g> <g class="dxc-axes-group"> <g class="dxc-arg-axis" clip-path="url(#DevExpress_14)"> <g class="dxc-arg-elements"> <text x="136" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 1</text> <text x="235" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 2</text> <text x="333" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 3</text> <text x="432" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 4</text> <text x="530" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 5</text> <text x="628" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 6</text> <text x="727" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 7</text> </g> <g class="dxc-arg-line"> <path d="M 87 468 L 776 468" transform="translate(0,0.5)" stroke-width="1" stroke="#d3d3d3"></path> </g> <g class="dxc-arg-title"></g> </g> <g class="dxc-val-axis" clip-path="url(#DevExpress_14)"> <g class="dxc-val-elements"> <text x="77" y="473" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">0K</text> <text x="77" y="436" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">10K</text> <text x="77" y="400" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">20K</text> <text x="77" y="363" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">30K</text> <text x="77" y="326" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">40K</text> <text x="77" y="290" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">50K</text> <text x="77" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">60K</text> <text x="77" y="217" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">70K</text> <text x="77" y="180" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">80K</text> <text x="77" y="143" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">90K</text> <text x="77" y="107" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">100K</text> <text x="77" y="70" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">110K</text> <text x="77" y="33" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">120K</text> </g> <g class="dxc-val-line"> <path d="M 87 468 L 87 10" transform="translate(0.5,0)" stroke-width="1" stroke="#d3d3d3"></path> </g> <g class="dxc-val-title"> <text x="40" y="239" transform="translate(0,0) rotate(270,40,239)" style="fill:#767676;font-size:16px;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;cursor:default;" text-anchor="middle">Y Axis Title</text> </g> </g> </g> <g class="dxc-constant-lines-group"> <g class="dxc-arg-constant-lines"></g> <g class="dxc-val-constant-lines"></g> </g> <g class="dxc-strips-labels-group"> <g class="dxc-arg-axis-labels"></g> <g class="dxc-val-axis-labels"></g> </g> <g class="dxc-border"> <path d="M 87.5 10.5 L 775.5 10.5 L 775.5 467.5 L 87.5 467.5 L 87.5 10.5 Z" transform="translate(0,0)" fill="none" stroke="#d3d3d3" stroke-width="1" stroke-linecap="square"></path> </g> <g class="dxc-series-group"> <g class="dxc-series"> <g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)"> <rect x="101" y="346" width="69" height="122" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="200" y="402" width="69" height="66" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="298" y="440" width="69" height="28" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="397" y="75" width="69" height="393" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="495" y="107" width="69" height="361" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="593" y="220" width="69" height="248" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="692" y="360" width="69" height="108" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> </g> </g> <g class="dxc-series"> <g class="dxc-elements" stroke="rgb(95,139,149)" stroke-width="2" clip-path="url(#DevExpress_30)"></g> <g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" r="6" visibility="hidden" class="dxc-markers" opacity="0.001" clip-path="url(#DevExpress_30)"></g> </g> </g> <g class="dxc-labels-group"> <g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="1" transform="translate(0,0)"> <g visibility="visible"> <g transform="translate(115,329)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$33,200</text> </g> </g> <g visibility="visible"> <g transform="translate(214,385)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$18,000</text> </g> </g> <g visibility="visible"> <g transform="translate(315,423)"> <rect x="-8" y="-17" width="51" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$7,600</text> </g> </g> <g visibility="visible"> <g transform="translate(408,58)"> <rect x="-8" y="-17" width="64" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$107,300</text> </g> </g> <g visibility="visible"> <g transform="translate(509,90)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$98,500</text> </g> </g> <g visibility="visible"> <g transform="translate(607,203)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$67,800</text> </g> </g> <g visibility="visible"> <g transform="translate(706,343)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$29,500</text> </g> </g> </g> <g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="0.001" transform="translate(0,0)"></g> </g> <g class="dxc-crosshair-cursor"></g> <g class="dxc-legend" clip-path="url(#DevExpress_14)"></g> </svg> 

I need to show custom tool tip when hovering over the X Axis titles ie Bar 1-7.

The SVG is auto generated, which is controlled from an XML file having Dashboard details. Refer Step 17

I believe, we need to change this generated Dashboard XML

My question here is:

Is it possible to show a (mouse hover) title on X axis titles?

Any suggestions, kind folks?

Answer 1

To customize Axis Labels , configure the dxChart used to display the Chart Item directly. Please review the Access to Underlying Widgets article where how to access the dxChart widget is described.

To customize the label hint, define the dxChart.argumentAxis.label.customizeHint function. This solution is described in this thread