How to use dataset properly

[xjuanc]

I'm trying to use the dataset schema found in here https://echarts.apache.org/handbook/en/concepts/dataset and neither the examples in the website I attached or the basic ones I built based on these examples, work in my app, it appears like this right now:

Am I supposed to send it through a different input? Right now I'm sending it through the options input:

<div
	echarts
	(chartInit)="onChartInit($event)"
	[ngStyle]="styles"
	[options]="test"
	[loading]="true"
	[autoResize]="true"
	[initOpts]="{ renderer: 'svg' }"
></div>

{
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

If I use the old series and data method, it works as expected.

Thanks for your help.

Edit: Remember to import the Dataset component in the root module...

[Lawlheart]

I ran into this issue too and I think I found part of the answer:

In many of the chart types in the series config, there's an encode option that allows you to set which properties in dataset translate to the different axes, etc

https://echarts.apache.org/en/option.html#series-bar.encode

[swapnil0545]

Bump. @Lawlheart Can you provide a stackblitz or working example for same

[rainij]

@swapnil0545 or anybody who bumps into this. I almost missed it too:

Edit: Remember to import the Dataset component in the root module...

This is what I did in the app.module.ts. (and it solved the issue):

import {/*other components*/ DatasetComponent } from 'echarts/components';
echarts.use([/*other components*/ DatasetComponent]);