Echarts bar graph - Is there a possibility of side scrolling?

echarts brush example
echarts legend position
echarts multiple y axis
echarts graphic
echarts tooltip example
echarts color
echarts responsive
echarts tutorial

Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).

My echarts version: ^4.0.4

My chart

You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.

    dataZoom: [
            show: true,
            start: 94,
            end: 100
            type: 'inside',
            start: 94,
            end: 100
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 30,
            height: '80%',
            showDataShadow: false,
            left: '93%'

I saw this example but i don't know what you want precisely.

High Impact Data Visualization with Power View, Power Map, and , In the first multiple pie chart visualization we created, it was Power View that If you add this field to the HORIZONTAL MULTIPLES box instead, then Power View place all the separate charts in a single row and add a scroll bar to allow you  Actually, ECharts should show the what ever possible legends in one line. If there is enough space to have 2 legends in one line, it should show 2 legends in one line. It should show 3 lines and if all legends doesn't fit in three lines, then should add vertical scroll. But, currently legends overlap to chart.

I found this example that can help you: Bar Chart with scrolling options

Engineering Communication, The horizontal scroll bar and arrows let you scroll across columns; the vertical the eBook and/or eChapter(s). plotting x–y graphs (scatter charts) Engineers  The following chart will be created. 8. Enable your Developer tab in ribbon. To do this go to File > Options > Customize Ribbo. Check the box for Developer. Now under the Developer ribbon's tab choose Insert > Scroll Bar. 9. Then insert the scroll bar anywhere in the chart window. Then right click the Scroll bar and select Format Control. 10.

Here I have referred the open source javascript graph library for your slider chart requirement.


min/max on yAxis for bar charts, makes the bars go outside limits , vadasambar changed the title min/max on yAxis for bar charts, makes If I specify min/max values outside min/max value of data, I see bars for 'bar' type graph. It is just a test currently and doesn't support horizontal bar styles or so the bars do keep within the grid boundary when zooming and scrolling,  Of course,there is an attribute named fixed decide a node fix or not.So you can set an event listener on echarts.For example,I set a click event listener like: myChart.on('click', function (params) { fixNode(; }); The is the object that you click on echarts.Then you should write a fixNode method like:

Display ECharts toolbox whenever zoom and scroll is enabled on a , Would adding a vertical zoom slider (available in ECharts) help alleviate this problem? Add toolbox and zoom and scroll as a chart story on gitlab-ui; Always include there just isn't that much data to display, which is why the graph is showing up It feels like the vertical scroll bar would add a decent amount of noise,  Scroll Bar 2D Chart. Now, let's create a scroll bar 2D chart. To render a scroll bar chart in 2D, change the value of the type attribute from scrollColumn2D to scrollBar2D. The rest of the data structure remains the same. For the detailed list of attributes, refer to the chart attributes page of the scroll bar 2D chart.

Changelog, [Fix] [title] Fix potential security risk when '_blank' target for link. #12380 (Su [Fix​] Fix tooltip shows multiple values around both sides of the pointer. #11648 (Su [Fix] Fix changing from 'scroll' type to 'plain' type not work bug in legend. [Fix] Fix taht the strange label position when the pie chart series data value is null . The chart displays the matrix values, which change as you manipulate the scroll bar. 10: Add a bit of polish The technique is now complete, but you'll want to position and format the chart and the

ECharts: A declarative framework for rapid construction of web , We compare the utility and performance of ECharts with C3.js, HighCharts, and Chart.js. Results On the other side, those declarative, domain specific languages (DSL) for information Similarly, pie chart, treemap, graph or other chart types can be abstracted as a series. It provides a possibility of multi-​thread rendering. The vertical-column-chart-or-horizontal-bar-chart question is one of the most common questions I receive about bar charts. It depends on what type of variable you're graphing. If you took a research methods or statistics class back in college, then you might remember learning about terms like nominal, ordinal, interval, or ratio variables. Some of these variables are better suited to vertical