charts/docs/basic/stacked_and_mixed.md
Prateeksha Singh 81a9a4e0e8 [docs] add more pages
- [init] annotations
- basic chart
- [outline] stacked and mixed
- [outline] trends and regions
2018-05-24 13:36:10 +05:30

1.3 KiB

Adding more datasets

As we have seen, chart can have multiple datasets. In an axis chart, every dataset is represented individually.

data: {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
    ]
}

Stacked Bar Chart

Bars have two ways to show multiple data point values. The property stacked in barOptions renders a stacked bar chart instead of the default adjacent bars:

barOptions: {
  stacked: 1    // default 0
}

[stacked/adjacent]

Mixed Bar/Line Chart

Each dataset can also have a different chartType, which if specified, will take precedence over the type property.

data: {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
      { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
      { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
    ]
}

All the lineOptions and barOptions apply to mix and match datasets as well.

[mix and match demo, no buttons]

In Aggregation Charts however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.