Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I want to be able to mix stacked bar charts + line charts #2524

Closed
TuringLovesDeathMetal opened this issue Jun 23, 2022 · 4 comments · Fixed by #2662
Closed

I want to be able to mix stacked bar charts + line charts #2524

TuringLovesDeathMetal opened this issue Jun 23, 2022 · 4 comments · Fixed by #2662
Assignees
@rephus
Labels
📈 chart config Issues related to chart types, chart settings, etc. ✨ feature-request Request for a new feature or functionality
Projects
Selected for Development

Comments

@TuringLovesDeathMetal
Copy link
Contributor

Description

I want to be able to pick which series to include in my stacked bar chart. If I change a series to a line, the other values should still stack in a bar chart, and my line should appear as its raw value (i.e. not stacked).

In this example, I'd expect if I changed the one series to a line, the rest of the values would stack, and this single value would become a line, unstacked. The same behaviour should work if it's changed to a scatter.

Any values that are bars or areas are automatically stacked.

https://www.loom.com/share/4e2c305458bf49eaa5e669d7dc820e08

What problem does this solve?

A user wanted to be able to stack some fo the values and have one value as a line.
@TuringLovesDeathMetal TuringLovesDeathMetal added the ✨ feature-request Request for a new feature or functionality label Jun 23, 2022
@owlas
Copy link
Collaborator

owlas commented Jun 23, 2022

@TuringLovesDeathMetal in echarts the way stacking works is actually that each individual series gets its own stacking id.

Then you can mix and match how many stacks you want and which series should be in those stacks.

So the config would be that each series would have an extra option (alongside series type / axis location / show labels) called stack, and it would be a number

So all series on stack 1 would stack, anything on stack 2 would stack separately. and anything with no stack wouldn't stack at all.

what do you think?

@TuringLovesDeathMetal
Copy link
Contributor Author

oooh amazing!

So you'd have stack as an extra option.
If there was 1 stack, you'd have the other options of stack 1, no stack or add new stack

If there were 2 stacks, you'd have the options: no stack, stack 1, stack 2, add new stack

Is that what you're thinking?

@owlas
Copy link
Collaborator

owlas commented Jun 23, 2022 •
edited

Example:

  • One series as a lonely bar
  • Three series as bars in a stack
  • a different three series as bars in a stack
  • two series as lines over laid not stacked

Screenshot 2022-06-23 at 19 48 20

paste the following into: https://echarts.apache.org/examples/en/editor.html?c=bar-stack

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Email',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Ask Jeeves',
      type: 'line',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      emphasis: {
        focus: 'series'
      }
    },
    {
      name: 'Baidu',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120]
    },
    {
      name: 'Google',
      type: 'line',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 290, 230, 220]
    },
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110]
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, 120]
    }
  ]
};

@TuringLovesDeathMetal
Copy link
Contributor Author

😍 beautiful!

@ZeRego ZeRego mentioned this issue Jun 24, 2022
Merged
@TuringLovesDeathMetal TuringLovesDeathMetal added this to 📝 To do in Selected for Development via automation Jul 5, 2022
@TuringLovesDeathMetal TuringLovesDeathMetal added the 📈 chart config Issues related to chart types, chart settings, etc. label Jul 8, 2022
Closed
@rephus rephus moved this from 📝 To do to ⏳ In progress in Selected for Development Jul 11, 2022
@rephus rephus self-assigned this Jul 11, 2022
@rephus rephus mentioned this issue Jul 11, 2022
Merged
Selected for Development automation moved this from ⏳ In progress to ✅ Done Jul 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rephus rephus

Labels
📈 chart config Issues related to chart types, chart settings, etc. ✨ feature-request Request for a new feature or functionality
Projects
No open projects
Selected for Development
✅ Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: can stack mixed series lightdash/lightdash
3 participants
@rephus @owlas @TuringLovesDeathMetal