highcharts-vue icon indicating copy to clipboard operation
highcharts-vue copied to clipboard

client side rendering = SVG is rendered with JS; server side rendering SVG is rendered with JS ?

Open JohnMica opened this issue 4 years ago • 3 comments

First, thanks for the wrapper and the hard work. Second, i have a few thoughts that might be issues or not and here they are

common requirements

  • using with NuxtJS (either on the server or on the client-only, depending on the chart)
  • cannot use simple array of numbers [ 1, 2 , 3 , 4 ]or `[ { x:1, y:0 }, { x:222, y:1 } ...] as the whole point is to display various information on the chart tooltips
  • importing in each component will trigger extra JS to be downloaded for each component
  • using actual script tags might be an option but not globally as not all pages use the charts so no need for extra JS files to be downloaded

The issues are

  1. Boost with 10.000 objects that need to be parsed
  • will not render the actual dots / lines / etc ... due to the 'malformed' JSON
  • need SVG to keep functionality (zoom, reorder, etc ....)
  1. NO Boost with 10.000 objects that need to be parsed
  • will render the chart after the page comes to a standstill for about 5-10 seconds
  • from a user functionality this is not really acceptable as users will not have the patience to wait for soo long
  • mobile phone usability is even worse

Not sure what you could help with, but i just wonder

  • what is the status with the Boost module (plans to accept other types of lines / charts/ JSON objects) ?
  • using with Vue 3 (since you mentioned you are thinking about rewriting the wrapper) would you add TS support ?
  • what are the plans of making the wrapper usable with SSR ?

JohnMica avatar Nov 18 '20 13:11 JohnMica

Hi @JohnMica ,

Thank you for contacting us. This is the highcharts-vue bug tracker so all the issues with Highcharts and its modules can be reported in the main Highcharts repo: https://github.com/highcharts/highcharts/issues. All questions about Highcharts or highcharts-vue wrapper can be sent to our support via [email protected].

  1. Please contact our support and check the Highcharts Roadmap here: https://www.highcharts.com/blog/roadmap/

  2. About the wrapper and Vue 3, we are still in the planning phase so no official decisions or ETA.

  3. Current wrapper version should be prepared to work with SSR. Check this NuxtJS example: https://codesandbox.io/s/z8jovxx04?file=/components/Logo.vue

Kind regards!

wchmiel avatar Nov 19 '20 15:11 wchmiel

Hi and thanks for the reply. Perhaps I didn't make myself understood so apologies.

Having over 10.000 objects

1

  • The issue using the boost module for lollipop chart is that
  • nothing's gets rendered on the chart as it requires simple array of numbers When not using boost module the chart gets rendered correctly but is really unusable
  • any plans to add to the boost module the possibility to use complex object instead of simple array of numbers ( or simple object with x and y props) ?

3

The issue is that the actual SVG is not part of the HTML served from the server when using SSR.

  • I am using with SSR but the SVG is not in the actual HTML. IT is attached with JS after.
  • using with "client-only" still renders the SVG with JS

2

  • Thanks for the information about Vue3 wrapper

JohnMica avatar Nov 19 '20 18:11 JohnMica

  1. The boost module does not support the lollipop series. As I know there are no plans to support complex objects (it will for sure decrease the performance).

  2. Highcharts library needs JS to create interactive charts, so there is no possibility to render charts on the server and maintain functionality (theoretically you can use our export server to get chart SVG and embed it on a page).

wchmiel avatar Nov 20 '20 12:11 wchmiel

Closing as it's not a highcharts-vue issue.

jszuminski avatar Jul 04 '23 12:07 jszuminski