When do you introduce zooming for xaxis.type = 'category'? #1195

michaeljakob · 2020-01-08T13:16:06Z

Is your feature request related to a problem? Please describe.
It has been clear that one of the biggest problems of apexcharts is that 'category' type charts are not zoomable. - and I know of more than 10 users that dropped it for that reason and we are on the verge of dropping it completely and never look back.

We need all the critical features that come with 'category' type charts:

tickPlacement: 'on' (instead of default 'between')
show the year for all items on the x-axis, not just every 5th year

Describe the solution you'd like
Enable zooming for xaxis.type='category' charts.

Additional context
Our current solution is a 'datetime' with hundreds of hacks, and it still looks buggy. We will definitely drop apexcharts in the next weeks if we can't solve this, which makes us really sad.

I'm attaching two screenshots that illustrate problems with 'datetime'.
We have a financial charts and want to show annual data for each year, e.g. 2018, 2019, 2020

Problem IE11 not working #1: Data should be ON the tick, not somewhere randomly inbetween -- looks buggy
Problem Feature Request: Download to XLSX, PNG and PDF #2: Show EVERY year, not randomly every nth year -- huge bummer for our users

Problem 3: Again, show EVERY year, especially the most recent year (2019)

How are your plans/roadmap for resolving this major issue?

michaeljakob · 2020-01-08T13:20:27Z

I want to highlight how some other parts of 'datetime' are severely broken.
Again: using xaxis.type='category' is exactly what we're looking for and solves all issues at once. The only downside is: we can't zoom!

Critical Problem Could you add the first gauge chart in README to the demo page? #4: Hovering on year 2016 shows tooltip for 2016. Hovering on year 2010 shows tooltip for 2011.
Problem Feature Request : Radar Chart #5: Note how the x-axis elements are 'off by one'. For year 2000, it seems to be totally lost on the left. The x-axis labels don't align at all with the data.

junedchhipa · 2020-01-08T13:40:12Z

Hi @michaeljakob
The timescale generation on ApexCharts is basically done this way.

Grab the min X data-point
Grab the max X data-point
Depending on how much the interval is between the min and max, the ticks are generated in this way.
Yearscale - The first day and first month (01 Jan) becomes the tick for the year-scale
Monthscale - The first day and the 15th of every month are generated for month-scale
Dayscale - Depending on how many days can fit, ticks are generated for day-scale and similarly, hour scale is generated.

I spent last week to allow zooming in the category axis and faced some issues, but most of them will be resolved soon.

Here is what's coming in the next release (hopefully tonight or tomorrow once I test it enough)

Zooming will be enabled by default for line charts even in the category axis.
For bar charts, zooming will be disabled by default but can be enabled easily by changing 2 properties
xaxis.tickPlacement: 'on' and chart.zoom.enabled: 'true'. Also, there are some issues with multiple series in a bar chart that part of the bars gets cropped when xaxis.tickPlacement is 'on'. So, you will need to adjust the grid.padding.left and grid.padding.right if this happens.

The reason why I want to disable zooming for bar charts by default is to prevent a breaking change.
I will document all these things on the website after the release so there is no confusion left.

Thanks for your patience.

junedchhipa · 2020-01-08T13:48:43Z

Here's a GIF. You can see the bars get cropped in the zooming. I haven't been able to find a good solution for it yet, but some manual workarounds should make it work.

michaeljakob · 2020-01-08T13:53:34Z

Hi Juned,
wow, I'm honestly amazed by the response speed. Your example with revenue/net profit/free cashflow is pretty much exactly what we are building. The GIF looks perfect to me, I'm confident I can fix the right padding/left padding you bring up.
All the other aspects of ApexChart are really great, looking forward to the upcoming release!

michaeljakob · 2020-01-12T13:15:53Z

Hey Juned, I saw that there was an update to vue-apexchart (1.5.2) yesterday. I tried changing xaxis.type from datetime to 'category', but I still wasn't able to see zooming here. *Could you please ping me when zooming will be enabled in vue-apexcharts? :D* FYI our 'zooming code' (works great with datetime!): zoom: { type: 'x' , enabled: true , autoScaleYaxis: true }, toolbar: { show: (window.innerWidth > 700 ), autoSelected: 'zoom' , tools: { zoomin: false , zoomout: false , pan: false , zoom: true , //'<svg/>', // don't show any icon, but still enable zoom :) },

…

On Wed, Jan 08, 2020 at 8:48 PM, Juned Chhipa < ***@***.*** > wrote: Here's a GIF. You can see the bars get cropped in the zooming. I haven't been able to find a good solution for it yet, but some manual workarounds should make it work. cat-zoom ( https://user-images.githubusercontent.com/17950663/71982826-71b75e00-324b-11ea-864a-d2ec71b66356.gif ) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub ( #1195?email_source=notifications&email_token=AA3OKG7MCKE5FHZVO72T3JLQ4XKTXA5CNFSM4KEIFZ6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIMPU4I#issuecomment-572062321 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AA3OKG6UFHNAQXQSXIKMKLLQ4XKTXANCNFSM4KEIFZ6A ).

junedchhipa · 2020-01-12T15:13:07Z

Hi Michael,
You will have to update the core apexcharts version to 3.14.0 from npm - https://www.npmjs.com/package/apexcharts

npm install apexcharts --save

For bar charts, you will have to manually enable zooming

chart: {
  zoom: {
    enabled: true
  }
},
xaxis: {
  tickPlacement: 'on'
}

Unfortunately, the zooming is still not perfect and I am still working on the margin/padding issues. Once it is done, I will close this thread and update it here.

michaeljakob · 2020-01-12T17:00:40Z

Hi Juned, I've updated both apexcharts (3.14.0) and vue-apexcharts (1.5.2), yet I can't find the proper controls for zooming. Do you have an example for that? I have attached our production code (stripped down to the relevant parts) where we did not get the zooming controls visible, nor the "drag and drop with mouse to zoom in" to be enabled. The padding issue you mentioned wouldn't be a huge problem for us :).

…

On Sun, Jan 12, 2020 at 10:13 PM, Juned Chhipa < ***@***.*** > wrote: Hi Michael, You will have to update the core apexcharts version to 3.14.0 from npm - https:/ / www. npmjs. com/ package/ apexcharts ( https://www.npmjs.com/package/apexcharts ) npm install apexcharts --save For bar charts, you will have to manually enable zooming chart : { zoom : { enabled : true } }, xaxis : { tickPlacement : ' on ' } Unfortunately, the zooming is still not perfect and I am still working on the margin/padding issues. Once it is done, I will close this thread and update it here. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub ( #1195?email_source=notifications&email_token=AA3OKG4PMVX3BVVYFFDJIKTQ5MXQHA5CNFSM4KEIFZ6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIW4HUI#issuecomment-573424593 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AA3OKG63FEJDAYHSSSSVLALQ5MXQHANCNFSM4KEIFZ6A ).

junedchhipa · 2020-01-12T17:12:27Z

Sure, I am going to update the docs with some examples soon. On Sun, 12 Jan 2020 at 10:30 PM, Michael Jakob <notifications@github.com> wrote:

…

Hi Juned, I've updated both apexcharts (3.14.0) and vue-apexcharts (1.5.2), yet I can't find the proper controls for zooming. Do you have an example for that? I have attached our production code (stripped down to the relevant parts) where we did not get the zooming controls visible, nor the "drag and drop with mouse to zoom in" to be enabled. The padding issue you mentioned wouldn't be a huge problem for us :). On Sun, Jan 12, 2020 at 10:13 PM, Juned Chhipa < ***@***.*** > wrote: > > > > Hi Michael, > You will have to update the core apexcharts version to 3.14.0 from npm - https:/ > / www. npmjs. com/ package/ apexcharts ( > https://www.npmjs.com/package/apexcharts ) > > npm install apexcharts --save > > For bar charts, you will have to manually enable zooming > > chart : { zoom : { enabled : true } }, xaxis : { tickPlacement : ' on ' } > > > Unfortunately, the zooming is still not perfect and I am still working on > the margin/padding issues. Once it is done, I will close this thread and > update it here. > > > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub ( > #1195?email_source=notifications&email_token=AA3OKG4PMVX3BVVYFFDJIKTQ5MXQHA5CNFSM4KEIFZ6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIW4HUI#issuecomment-573424593 > ) , or unsubscribe ( > https://github.com/notifications/unsubscribe-auth/AA3OKG63FEJDAYHSSSSVLALQ5MXQHANCNFSM4KEIFZ6A > ). > > > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1195?email_source=notifications&email_token=AEI6PR4Z77TKJB3Z6AGLNLTQ5NEDTA5CNFSM4KEIFZ6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIW62VI#issuecomment-573435221>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEI6PR3R24UZHYHJ2ZBSERDQ5NEDTANCNFSM4KEIFZ6A> .

junedchhipa · 2020-01-14T05:56:11Z

Released v3.15.0 with the zooming enabled on category x-axis.
Example - https://apexcharts.com/javascript-chart-demos/column-charts/column-with-rotated-xaxis-labels/

Doc: https://apexcharts.com/docs/zooming-in-category-x-axis/

Eskimo111 · 2023-02-01T07:03:21Z

Hi @junedchhipa
I noticed that the columns resize when you zoom in on the gif you previously uploaded; is there any way I can replicate that effect?
I've tried a lot of things, such as switching the version and redrawing the chart on zoom or pan, but nothing seems to work.

emailnikola · 2023-02-08T15:58:57Z

@Eskimo111 Columns resize when x-axis is "timeline" instead of "category".

junedchhipa closed this as completed Jan 14, 2020

mateuswetah mentioned this issue Oct 28, 2022

"Next" and "Previous" navigation for zoomed category bar chart #3458

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When do you introduce zooming for xaxis.type = 'category'? #1195

When do you introduce zooming for xaxis.type = 'category'? #1195

michaeljakob commented Jan 8, 2020

michaeljakob commented Jan 8, 2020 •

edited

Loading

junedchhipa commented Jan 8, 2020 •

edited

Loading

junedchhipa commented Jan 8, 2020

michaeljakob commented Jan 8, 2020

michaeljakob commented Jan 12, 2020 via email •

edited by junedchhipa

Loading

junedchhipa commented Jan 12, 2020

michaeljakob commented Jan 12, 2020 via email

junedchhipa commented Jan 12, 2020 via email

junedchhipa commented Jan 14, 2020

Eskimo111 commented Feb 1, 2023 •

edited

Loading

emailnikola commented Feb 8, 2023

When do you introduce zooming for xaxis.type = 'category'? #1195

When do you introduce zooming for xaxis.type = 'category'? #1195

Comments

michaeljakob commented Jan 8, 2020

michaeljakob commented Jan 8, 2020 • edited Loading

junedchhipa commented Jan 8, 2020 • edited Loading

junedchhipa commented Jan 8, 2020

michaeljakob commented Jan 8, 2020

michaeljakob commented Jan 12, 2020 via email • edited by junedchhipa Loading

junedchhipa commented Jan 12, 2020

michaeljakob commented Jan 12, 2020 via email

junedchhipa commented Jan 12, 2020 via email

junedchhipa commented Jan 14, 2020

Eskimo111 commented Feb 1, 2023 • edited Loading

emailnikola commented Feb 8, 2023

michaeljakob commented Jan 8, 2020 •

edited

Loading

junedchhipa commented Jan 8, 2020 •

edited

Loading

michaeljakob commented Jan 12, 2020 via email •

edited by junedchhipa

Loading

Eskimo111 commented Feb 1, 2023 •

edited

Loading