const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 38
      },
      {
        time: '4:00',
        value: 56
      },
      {
        time: '6:00',
        value: 10
      },
      {
        time: '8:00',
        value: 70
      },
      {
        time: '10:00',
        value: 36
      },
      {
        time: '12:00',
        value: 94
      },
      {
        time: '14:00',
        value: 24
      },
      {
        time: '16:00',
        value: 44
      },
      {
        time: '18:00',
        value: 36
      },
      {
        time: '20:00',
        value: 68
      },
      {
        time: '22:00',
        value: 100
      }
    ]
  },
  xField: 'time',
  yField: 'value',
  line: {
    style: {
      curveType: 'monotone'
    }
  },
  brush: {
    brushType: 'x',
    inBrush: {
      colorAlpha: 1
    },
    outOfBrush: {
      colorAlpha: 0.2
    }
  },
  
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();



vchart.on('brushEnd', (params) =>{
  const values = params.value;
  const first = values.inBrushData[1]
  const last = values.inBrushData[values.inBrushData.length -1]
  console.info(first, last,params)
  spec.markArea = [
      {
      coordinates: [
       {
        time: first.time,
        value: 0,
      },
      {
        time: last.time,
        value: 0,
      },
       
      {
        time: last.time,
        value: 'max',
      },
        {
        time: first.time,
        value: 'max',
      },
      ],
      label: {
        text: 'Electricite prices have surged since 2020',
        position: 'insideTop',

        labelBackground:{
          style:{
            fill:"red"
          }
        }
      },
       area: {
        style: {
          fill: 'red',
          fillOpacity: 0.15
        }
      },
    }
  ]
  vchart.updateSpec(spec, true)  
})

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;