Adding legends plugins, the colors are not assigned.

[keikou]

I tried the latest version, still has the problem,having the legends plugins added the colors are not assigned.

<script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script> 
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
<script type="text/javascript">
        chart_target = new Taucharts.Chart({
          type: 'stacked-area',
          x: 'time',
          y: 'count',
          color: 'group',
          data: data,
          guide: {
            showAnchors: 'always',
            //interpolate: 'smooth-keep-extremum',
            x: { padding: 20, label: { text: 'time', padding: 35 } },
          },
          settings: {
            fitModel: 'fit-width',

          },
          plugins: [
            Taucharts.api.plugins.get('tooltip')(),
            Taucharts.api.plugins.get('legend')()
          ]
        });
        chart_target.renderTo('#chart_target');
</script>

[Mavrin]

Could you provide more information? I can understand what result do you expect? https://jsfiddle.net/8jg9yzL6/

[keikou]

Hi,Mavrin
I need to increase/decrease group by time and set chart data dynamically.
Following code works beautifully without legends plugins, but lose color when legends plugins added

https://jsfiddle.net/p3hdu791/59/

var data = [{
  time: 1,
  count: 1,
  group: 'test1'
 },
 {
  time: 2,
  count: 1,
  group: 'test1'
 }
]
const chart_target = new Taucharts.Chart({
  type: 'stacked-area',
  x: 'time',
  y: 'count',
  color: 'group',
  data: data,
  guide: {
    showAnchors: 'always',
    //interpolate: 'smooth-keep-extremum',
    x: {
      padding: 20,
      label: {
        text: 'time',
        padding: 35
      }
    },
  },
  settings: {
    fitModel: 'fit-width',

  },
  plugins: [
    Taucharts.api.plugins.get('tooltip')(),
    Taucharts.api.plugins.get('legend')()
  ]
});
chart_target.renderTo('#chart_target');

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

//group test2 will be created at time 3
for(var i=3;i<4;i++){
	var appned_data = [{
  	time: i,
  	count: i,
  	group: 'test1'
	}, {
  	time: i,
  	count: i,
  	group: 'test2',
	}
  ];
	Array.prototype.push.apply(data, appned_data)
}

//group test3 will be created at time 4
for(var i=4;i<6;i++){
	var appned_data = [{
  	time: i,
  	count: i,
  	group: 'test1'
	}, {
  	time: i,
  	count: i,
  	group: 'test2',
	},{
  	time: i,
  	count: i,
  	group: 'test3',
	}
  ];
	Array.prototype.push.apply(data, appned_data)
}
chart_target.setData(data)

[Mavrin]

Got it. You can use .updateConfig for that case.
https://jsfiddle.net/2kxbLd0m/

[keikou]

Got it. You can use .updateConfig for that case.
https://jsfiddle.net/2kxbLd0m/

It works beautifully. Thank you.