How-tos

You can read about general customization rules in the corresponding article.

Custom Palette for Chart

In case the built-in palette does not meet your project requirements, you can define a custom one. Create a custom class and inherit it from the default pivot.views["config/properties/values"]. Its ItemConfig() method is the one to redefine.

In this sample we will use ColorSelector as a custom palette:

class CustomValuesProperty extends pivot.views["config/properties/values"] {
  ItemConfig(val, i) {
    const config = super.ItemConfig(val, i);
    config[1].suggest = {
      padding: 0,
      type: "colorselect",
      body: {
        button: true,
      },
    };
    return config;
  }
}

Do not forget to override the default view:

webix.ui({
  view: "pivot",
  structure: {
    rows: ["form", "name"],
    columns: ["year"],
    values: [{ name: "oil", operation: ["min", "sum"] }],
  },
  override: new Map([
    [pivot.views["config/properties/values"], CustomValuesProperty],   ]),
});

Providing Unlimited Number of Rows

By default Pivot can process 10.000 rows of data. You can extend this to any number your project requires. To provide unlimited number of rows create a custom class and inherit it from the default pivot.services.LocalData. Redefine its getLimits() method as follows:

class MyData extends pivot.services.LocalData {
  getLimits() {
    return { rows: Infinity, columns: Infinity, raws: Infinity };
  }
}

Do not forget to override the default service:

webix.ui({
  view: "pivot",
  structure: {
    rows: ["form", "name"],
    columns: ["year"],
    values: [{ name: "oil", operation: ["min", "sum"] }],
  },
  override: new Map([[pivot.services.LocalData, MyData]]), });

Related sample: Pivot: Data Limits