Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
270
Chart labels formatting with legend
posted

Hi,

We have some issues in labels formatting how to fix that ?

  • Format Xaxis and Yaxis labels as

             fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',

             color: 'black',

             fontWeight: '600',

             fontSize: '11.4px'

  • Legend also show line color and description for Primary Trends line when we select it, When No Trenline is selected than it must be removed from legend. How to fix it? 
  • How to vertical line tracked with mouse position faster.  It seems there is a delay now ?
  • Sample application is attached.
Regards,
Sufyan
Chart.zip
Parents
  • 8421
    posted

    Hello Sufyan,

    For formatting the labels you can make use of the labelTextStyle property off of the axis definition and for changing the color you can use the labelTextColor property. labelTextStyle accepts any valid CSS font setting, so you can define your specified font as the following:

                                }, {
                                    type: "numericY",
                                    name: "yAxis",
                                    stroke: axisStokeLinesBrush,
                                    tickLength: axisTickLength,
                                    minorStroke: "Transparent",
                                    minorStrokeThickness: "0",
                                    majorStroke: "#FFE6EFF7",
                                    majorStrokeThickness: "0.25",
                                    majorStrokeDashArray: "1 2",
                                    labelExtent: 90,
                                    labelHorizontalAlignment: "left",
                                    labelTextColor: 'black',
                                    labelTextStyle: "500 11.4px 'Helvetica Neue', Helvetica, Arial, sans-serif",
                                    formatLabel: function (val) {
                                        return formatCurrency(val, true);
                                    }
                                },

    As for showing the trend as an item in the series the chart doesn't currently support this directly and this would be considered a new product idea. In theory you could create a new series bound to the same data that uses a brush color of transparent. Then you would override the template for the item in the legend and change it to the color that is used for your trendline. This would give you the appearance of what you want, though it does require adding another series to the chart.

    If you would like to submit a product idea to have the chart do this for you then you may submit it at the Ignite UI Product Ideas page.

    Finally, no real delay has been introduced in to the crosshairLayer. However, if you would like to control how it is rendering there are a couple of properties you may use. First, there is shouldRenderAsOverlay which will tell the chart that it does not need to rerender everything if that layer changes, which may give you slightly better performance. Next, you can try modifying the transitionDuration which controls the speed that the layer transitions between different states.

    Please let me know if you have any questions or concerns about any of these details.

Reply Children