Apexcharts.js: Not working vertical range annotation

Created on 18 May 2019  路  10Comments  路  Source: apexcharts/apexcharts.js

Codepen

https://codepen.io/xxx44yyy/pen/PvjLvL?editors=0010

  1. vertical annotation:
    image

  2. click to child:
    image

  3. see non vertical annotation:
    image

why green label block is non vertical?
image

Most helpful comment

Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.js

The CDN might take some hours to propagate the changes.

All 10 comments

code:

var options = {
  annotations: {
    xaxis: [
      {
        x: new Date("11/17/2017").getTime(),
        strokeDashArray: 0,
        borderColor: "#775DD0",
        label: {
          borderColor: "#775DD0",
          style: {
            color: "#fff",
            background: "#775DD0"
          },
          text: "X Axis Anno Vertical"
        }
      }
    ],
  },
  chart: {
    height: 380,
    type: "line",
    id: "areachart-2",
        toolbar: {
    show: true,
    tools: {
      download: false,
      selection: false,
      zoom: false,
      zoomin: false,
      zoomout: false,
      pan: false,
      reset: false,
      customIcons: [{
 icon: '<img src="http://adecinc.com/wp-content/uploads/2018/07/baby-baby-girl-newborn-raw-simple-icon-png-18.png" width="16">',
 title: 'xxxx',
 click: function() {
 chart.addXaxisAnnotation({
   x: new Date('26 Nov 2017').getTime(),
   x2: new Date('28 Nov 2017').getTime(),
   fillColor: '#B3F7CA',
   opacity: 0.4,
   label: {
       borderColor: '#B3F7CA',
       style: {
           fontSize: '10px',
           color: '#fff',
           background: '#00E396',
       },
       offsetY: -10,
     text: 'X-axis range'
   }
 });
 }
                              }]
                          }
                      }
  },
  series: [
    {
      data: series.monthDataSeries1.prices
    }
  ],
  labels: series.monthDataSeries1.dates,
  xaxis: {
    type: "datetime"
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();


Fixed the issue.
Will be released in 3.6.12

@junedchhipa Thanks!! How can I use your changes right now? I did not work with webpack, react, vue. I can't find min.js

The new patch version will be released tomorrow. Please use the same cdn link when it is released as it will be automatically updated too.

ok :(

The new patch version will be released tomorrow. Please use the same cdn link when it is released as it will be automatically updated too.

How soon?

How soon?

I don't know. :( Now 3.6.10

@junedchhipa

Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.js

The CDN might take some hours to propagate the changes.

Released 3.6.12
https://cdn.jsdelivr.net/npm/apexcharts@latest
https://unpkg.com/[email protected]/dist/apexcharts.min.js

The CDN might take some hours to propagate the changes.

Thanks!!!!!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tcarlsen picture tcarlsen  路  3Comments

piyushSinghalDemo picture piyushSinghalDemo  路  3Comments

jlil picture jlil  路  3Comments

rcoundon picture rcoundon  路  3Comments

cstlaurent picture cstlaurent  路  3Comments