The dashed line is wrong when using data.groups and data.regions togather

[shijingjing1221]

        var chart = c3.generate({
            data: {
                type: "area",
                groups: [['data1', 'data2']],
                columns: [
                    ['data1', 30, 200, 60, 400, 150, 250],
                    ['data2', 50, 20, 50, 40, 15, 25]
                ],
                regions: {
                    'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
                      'data2': [{'end':3}]
                }
            }
        });

http://jsfiddle.net/7ydhyjm3/2/

[javflores]

Hi there,
I was having a similar issue. I ended up finding that groups were the issue.
Try splitting your groups like this (it seems to work for me):

var chart = c3.generate({
  data: {
    type: "line",
    groups: [['data1'], ['data2']],
    columns: [
      ['data1', 30, 200, 60, 400, 150, 250],
      ['data2', 50, 20, 50, 40, 15, 25]
    ],
    regions: {
      'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
      'data2': [{'end':3}]
    }
  }
});

If you change your graph to spline, it won't work though, but that's a different story :)

var chart = c3.generate({
  data: {
    type: "spline",
    groups: [['data1'], ['data2']],
    columns: [
      ['data1', 30, 200, 60, 400, 150, 250],
      ['data2', 50, 20, 50, 40, 15, 25]
    ],
    regions: {
      'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
      'data2': [{'end':3}]
    }
  }
});