syampillai / SOCharts

A wrapper around the "echarts" JavaScript library to use it as a Vaadin component.
Apache License 2.0
27 stars 11 forks source link

Line Chart not rendering all data when put together in same SOCharts container with some Bar Charts (and workarounds) #37

Open Bowl76 opened 4 months ago

Bowl76 commented 4 months ago

Hi,

first of all great work with SOCharts, it saved me a lot of hassle.

I have found a possible issue when putting together several Bar and Line charts in the same SOChart container or it could just be improper usage of SOCharts from my side. It seems Line chart doesn't render all data points when drawn with some other charts, in my case Bar charts, it renders only the number of points that corresponds to number of XAxis categories from other Bar charts.

I have prepared small example demonstrating my issue here, including only minimum necessary files, using default Vaadin starter:

https://github.com/Bowl76/SOCharts_example

Here Line chart renders only 7points instead of 40 points randomly generated.

It's not a big issue, here are some workarounds:

Workaround 1: Change the order of adding charts to SOCharts container: Default was: soChart.add(otherChart1, otherChart2, otherChart3, lineChart); Workaround: soChart.add(lineChart, otherChart1, otherChart2, otherChart3); Putting Line chart on firts place seems to render all data points but distorts XAxis of other charts especcialy when pushing data to Line Chart dynamically.

Workaround2: Using two or more SOCharts container to isolate Line Chart from other Charts


    SOChart soChartOtherCharts;
    SOChart soChartLineChart;
// other code
    soChartOtherCharts.add(otherChart1, otherChart2, otherChart3);
    soChartLineChart.add(lineChart);
// other code

This is the workaround I'm currently using.

Regards