Hi,
We have some issues in labels formatting how to fix that ?
fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
color: 'black',
fontWeight: '600',
fontSize: '11.4px'
Hello Sufyan,
Setting shouldRenderAsOverlay to true and setting transitionDuration to 0 should be all that is needed. You need to make sure that you apply these settings to all charts that are using the same syncChannel. If you miss the shouldRenderAsOverlay setting on one of the crosshairLayers then it is likely that you might get a bit of slowdown still as a chart is being completely redrawn whenever you use the mouse.
I've attached a modified version of your sample that demonstrates this approach.
Hi Jason,
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.