score:5

Accepted answer

1. Crowded Charts

a. Have you tried rotating the labels? This would significantly reduce the overcrowding on the labels that you earlier had.

Here's your Fiddle with the label mod: http://jsfiddle.net/kayen/YSwk4/

b. If you have a lot of values and are restricted by space on the x-axis, you can convert your column-type chart to a bar-type chart.

Here's your Fiddle with the bar-chart mod: http://jsfiddle.net/kayen/QqPha/

I would suggest using the first option as you can fit much more values in the same space and have a much cleaner chart.

score:8

Let's see if I can help you...

"Chart Crowded"

I can imagine three ways to avoid your charts to be "crowded":

Method 1: Let the user choose what to see.

Either hide adding visible: false to some or all your series, using this will allow the user to choose what data he wants to see. For example:

series: [
            {
                name: ...,
                data: ...,
                visible: false
            },
            ...
        ]

If you choose this example you could could also think about adding a button to show/hide all, that you can achieve by using:

Hide everything:

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].hide();

Show everything:

for(i=0; i < chart.series.length-1; i++)
    chart.series[i].show();

Method 2: Zoomming your way out of the problem

In alternative you can use zoomType: 'x' in your chart allowing the user to zoom and see the data in detail, the user can then scroll with the zoom to the left and right of the chart or reset the zoom and choose another point to see.


Method 3: overflow

In alternative you can create a giant chart and use overflow to allow the chart div to be scrollable, or hide the overflow and manage the scrollX & scrollY trough jQuery.


Can you provide the code or link to fiddle of the svg example so I can check your code and see if I can help you with that?

Thank you.


Related Query

More Query from same tag