Current filter:
                                You should refresh the page.
                                  • Hello.
                                    I am using 'barGauge' and want to show the label of the value besides the value.
                                    The value of the gauge changes periodically.
                                    In addition, data is sorted according to certain criteria.
                                    Below is the function that creates my gauge.
                                    - Gauge Create

                                    [JavaScript]
                                    function renderGauge(ctx, lbls, vals) { return ctx.dxBarGauge({ startValue: 0, endValue: getMaxValue(vals), values: vals, margin: 0, title: { text: 'title', verticalAlignment: 'top', horizontalAlignment: 'center', margin: { bottom: 30, }, font: { color: "#FFFFFF", family: "TAHOMA, YAHEI, MALGUNGOTHIC", opacity: 1, size: 20, weight: 600 } }, label: { visible: true, indent: 5, font: { color: "#FFFFFF", family: "TAHOMA, YAHEI, MALGUNGOTHIC", opacity: 1, size: 20, weight: 600 }, format: { type: "fixedPoint", precision: 0 }, customizeText: function (arg) { return lbls[arg.index] + ' : ' + arg.valueText; } }, legend: { visible: true, verticalAlignment: 'top', horizontalAlignment: 'right', font: { color: "#FFFFFF", family: "TAHOMA, YAHEI, MALGUNGOTHIC", opacity: 1, size: 20, weight: 600 }, customizeText: function (arg) { return lbls[arg.item.index] + ' : ' + arg.text; } }, tooltip: { enabled: true, font: { color: "#000000", family: "TAHOMA, YAHEI, MALGUNGOTHIC", opacity: 1, size: 20, weight: 600 }, customizeTooltip: function (arg) { return { text: lbls[arg.index] + ' : ' + arg.valueText }; } }, onInitialized: function (e) { e.component.render(); }, }).dxBarGauge('instance'); }

                                    - Gauge Update

                                    The problem is that the labels remain the same even if the data is reordered.
                                    I tried changing the label as below but it doesn't work.

                                    [JavaScript]
                                    function updateGauge(gauge, lbls, vals) { gauge.option('values', vals); gauge.option('label', { customizeText: function (arg) { return lbls[arg.index] + ' : ' + arg.valueText; } }); gauge.option('legend', { customizeText: function (arg) { return lbls[arg.item.index] + ' : ' + arg.text; } }); gauge.option('tooltip', { customizeTooltip: function (arg) { return { text: lbls[arg.index] + ' : ' + arg.valueText }; } }); }

                                    Global variables cannot be used because there are several gauges on a page.
                                    What is an effective way to change the lable?

                                • JooYoung Lee 10.09.2019

                                  It was a temporary error
                                  It works fine now.

                                  If you have a better way, I recommend.

                                • Alessandro (DevExpress Support) 10.10.2019

                                  Hi,

                                  According to my tests, value labels are updated automatically when the underlying values are modified. I have prepared a small code example to illustrate this: https://codepen.io/Alex969/pen/ZEEbbeo.

                                  If I missed anything important, please modify the sample to illustrate the problem. Use the "Fork" button to save changes and post the updated link here for further research.

                                • JooYoung Lee 10.10.2019

                                  In my code 'lbls' is a value that changes externally.
                                  Your example only includes the default 'values'.

                                • Alessandro (DevExpress Support) 10.11.2019

                                  Hi,

                                  In this scenario, I am not sure how to replicate the issue from scratch. Please update my sample to illustrate the issue in action. Thank you for your time and cooperation in advance.

                                0 Solutions

                                Creation Date Importance Sort by