custom chart : bar with markers.

[oldboy5555]

I have an assignment to create a chart like this with vuejs + apexcharts . I went through the examples on the site and found the bar chart section with these markers to be a bit like my assignment. but when I re-use it, I can't move the correct position of the markers, hope you guys can help me with your suggestions. I thank you in advance.

and here is my code file :`

<title>Column Chart with Markers</title>

<link href="../../assets/styles.css" rel="stylesheet" />

<style>
  
    #chart {
  max-width: 650px;
  margin: 35px auto;
}
  
</style>

<script>
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
    )
</script>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>


<script>
  // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
  // Based on https://gist.github.com/blixt/f17b47c62508be59987b
  var _seed = 42;
  Math.random = function() {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
  };
</script>

<div id="app">
  <div id="chart">
  <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>

<!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
<div id="html">
  &lt;div id=&quot;chart&quot;&gt;
    &lt;apexchart type=&quot;bar&quot; height=&quot;350&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
  &lt;/div&gt;
</div>

<script>
  new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: {
      
      series: [
        {
          name: 'Actual',
          data: [
            {
              x: '2011',
              y: 12,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 21,
                  
                  strokeColor: '#775DD0'
                },
                {
                  name: 'Expected 2',
                  value: 120,
                  strokeWidth: 21,
                  
                  strokeColor: '#775DD0'
                }
              ]
            },
            {
              x: '2012',
              y: 44,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 5,
                  strokeHeight: 10,
                  strokeColor: '#775DD0'
                },{
                  name: 'Expected 2' ,
                  value: 120,
                  strokeWidth: 5,
                  strokeHeight: 10,
                  strokeColor: '#775DD0'
                }
              ]
            },
            {
              x: '2013',
              y: 54,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 10,
                  strokeHeight: 10,
                  strokeColor: '#775DD0'
                },
                {
                  name: 'Expected 2',
                  value: 120,
                  strokeWidth: 10,
                  strokeHeight: 0,
                  strokeLineCap: 'round',
                  strokeColor: '#775DD0'
                }
              ]
            },
            {
              x: '2014',
              y: 66,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 10,
                  strokeHeight: 0,
                  strokeLineCap: 'round',
                  strokeColor: '#775DD0'
                },
                {
                  name: 'Expected 2',
                  value: 120,
                  strokeWidth: 10,
                  strokeHeight: 0,
                  strokeLineCap: 'round',
                  strokeColor: '#775DD0'
                }
              ]
            },
            {
              x: '2015',
              y: 81,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 10,
                  strokeHeight: 0,
                  strokeLineCap: 'round',
                  strokeColor: '#775DD0'
                },{
                  name: 'Expected 2',
                  value: 120,
                  strokeWidth: 10,
                  strokeHeight: 0,
                  strokeLineCap: 'round',
                  strokeColor: '#775DD0'
                }
              ]
            },
            {
              x: '2016',
              y: 67,
              goals: [
                {
                  name: 'Expected 1',
                  value: 100,
                  strokeWidth: 5,
                  strokeHeight: 10,
                  strokeColor: '#775DD0'
                },
                {
                  name: 'Expected 2',
                  value: 120,
                  strokeWidth: 5,
                  strokeHeight: 10,
                  strokeColor: '#775DD0'
                }
              ]
            }
          ]
        }
      ],
      chartOptions: {
        chart: {
          height: 350,
          type: 'bar'
        },
        plotOptions: {
          bar: {
            horizontal: true,
            distributed:true
          }
        },
        colors: ['#00E396'],
        xaxis:{
          max: 150,
          min:0
        },
        dataLabels: {
          formatter: function(val, opt) {
            const goals =
              opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
                .goals
        
            if (goals && goals.length) {
              return `${val} }`
            }
            return val
          }
        },
        legend: {
          show: true,
          showForSingleSeries: true,
          customLegendItems: ['Actual', 'Expected 1', 'Expected 2'],
          markers: {
            fillColors: ['#00E396', '#775DD0',"#335DA2"]
          }
        },
        annotations: {
        xaxis: [
          {
            x: 100,
            strokeDashArray: 0,
            borderColor: "red",
            label: {
              borderColor: "red",
              style: {
                color: "#fff",
                background: "red",
              },
              text: "",
            },
          },
          {
            x: 120,
            strokeDashArray: 0,
            borderColor: "#775DD0",
            label: {
              borderColor: "#775DD0",
              style: {
                color: "#fff",
                background: "#775DD0",
              },
              text: "",
            },
          },
          
        ],
      },
      },
      
      
    },
    
  })
</script>

`