asked on April 8, 2022
Hi Team,
I tried to find out way to achieve the below functionality in flexmonster but could not get any proper way. So could you please help us on below functionality in angular with example ‘if possible.
1.How can I decrease the legend panel height?
(For more information please find attachment screenshot 1)
2.How can I increase the column chart bars width(It is ok if horizontal scroll bar increased when bars width increased)?
(For more information please find attachment screenshot 2)
3.How can I modify the tool tip content which we get when mouse over the column chart bar?
(For more information please find attachment screenshot 3)
Thanks,
Ankaiah
⋅ April 12, 2022
Hello, Dama!
Thank you for writing to us.
For customizing the chart, Flexmonster has a customizeChartElement API call. It customizes each element (column bar, legend etc) separately and takes two parameters:
Some customizations can be done only with CSS.
Decrease the legend panel height
You can limit max-height for fm-chart-legend-container to decrease the legend panel height. Please see the CSS code:
.fm-chart-legend-container {
max-height: 120px !important;
}
Increase the column chart bar's width
Currently, Flexmonster Pivot Charts do not provide a flexible way to change the bars' width directly.
A possible solution to increase the bars' width could be to limit the amount of data shown on a single chart via filters.
Alternatively, we recommend using third-party charting libraries to extend Flexmonster's charting functionality. You can retrieve the aggregated data using getData API call for using it in other charting libraries or use our connectors for amCharts, Highcharts, Google Chars, or FusionCharts.
Please see our tutorial page about using third-party charting libraries with Flexmonster.
Modifying the tooltip content which we get when a mouse is over the column chart bar
You can modify the tooltip content through the textContent property. To access the tooltips, use the element.querySelector method.
Please see our example containing solutions for the first and third cases you have mentioned: https://jsfiddle.net/flexmonster/qzfk219n/.
Feel free to contact us if additional questions arise.
Best Regards,
Maksym
⋅ April 20, 2022
Hello, Dama!
We are wondering if you had time to use the suggested approaches for Flexmonster Pivot Charts customization. Looking forward to hearing from you.
Best Regards,
Maksym