asked on January 23, 2020
Hello,
We have a question related to the way the "Column line" chart is displayed when setting the Fields as Columns and the Values as rows.
As you can see in the attached image (column_line_chart.png), all the values from the second Value member are displayed on a single line in the middle of the chart.
We think that this is a very strange and confusing way of displaying the data, specially if you have many members because then you only see a lot of colored dots one on top of another; it would make a lot more sense to display each "dot" aligned with the bar that it belongs to (as seen in the second attached image column_line_chart_2.png).
We'd like to know if this is a bug or if it looks like this by design.
Thank you.
⋅ January 23, 2020
Hello, Javier,
Thank you for contacting us.
Our team would like to kindly inform you that such behavior is expected due to specific of the charts and its structure.
However, in case that implementation does not fit your needs, we suggest either considering using third-party charting libraries or using the following workaround: place the following JS function in order to achieve the result illustrated on the second attached screenshot:
flexmonster.on('afterchartdraw', function () {
if (flexmonster.getOptions().chart.type = "column_line") {
let bars = document.getElementsByClassName('fm-bar');
let circles = document.getElementsByClassName('fm-circle');
for(let i = 0; i < bars.length; i++) {
circles[i].setAttribute('cx', parseInt(bars[i].getAttribute('x')) + (bars[i].getAttribute('width')) / 2);
circles[i].setAttribute('transform', bars[i].parentElement.getAttribute('transform'));
} }
});
Please check out an example we have prepared for you, demonstrating such an approach.
You are welcome to contact us in case of additional questions.
Best regards,
Illia
⋅ January 23, 2020
Hello Illia, thank you for showing us this approach, I tested it and it's a good enough solution for us.
This question is now closed