Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support Annotation Text Multi-line

See original GitHub issue

Summary

ApexCharts supports multi-line text for other label types, but doesn’t support it for annotation labels as it only accepts a string field. Typical newline characters are rendered instead of breaking to a new line. https://apexcharts.com/docs/options/annotations/#ytext

API Changes

The text field should continue to support the string type but also add a string[] type to support multi-lines.

Intended Use Case

Annotated text without multi-line ends up being 1 long text label. E.g: $324,539.9239 - 31/05/2022 09:32 would render better as:

$324,539.9239
31/05/2022 09:32

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

1reaction

PalliNaganjaneyulucommented, May 26, 2022

could you please help me on this , thanks
hi sir how to i display x-axis annotation custom height , in area-chart ,

out put like below

my out put is like below

.ts code this.chartOptions = { series: [ { // data: [ // 20, 40, 60, 80, 60, 40, 20, 40, 80, 60, 40, 20, 40, 80, 100, 130, // ], data: [ 20, 30, 40, 50, 60, 50, 40, 30, 20, 30, 40, 50, 40, 30, 20, 80, ], }, ],

  chart: {
    type: 'area',
    height: 350,
    toolbar: {
      show: false,
    },
  },
  forecastDataPoints: {
    count: 0,
    fillOpacity: 0.5,
    strokeWidth: undefined,
    dashArray: 4,
  },

  annotations: {
    xaxis: [
      { x: 60, borderColor: '#999', strokeDashArray: 5 },
      { x: 120, borderColor: '#999', strokeDashArray: 5 },
      { x: 175, borderColor: '#999', strokeDashArray: 5 },
      { x: 235, borderColor: '#999', strokeDashArray: 5 },
      { x: 295, borderColor: '#999', strokeDashArray: 5 },
      { x: 355, borderColor: '#999', strokeDashArray: 5 },
      { x: 415, borderColor: '#999', strokeDashArray: 5 },
      { x: 470, borderColor: '#999', strokeDashArray: 5 },
      { x: 530, borderColor: '#999', strokeDashArray: 5 },
      { x: 590, borderColor: '#999', strokeDashArray: 5 },
      { x: 650, borderColor: '#999', strokeDashArray: 5 },
      { x: 710, borderColor: '#999', strokeDashArray: 5 },
      { x: 770, borderColor: '#999', strokeDashArray: 5 },
      // { x: 828, borderColor: '#999', strokeDashArray: 5 },
      // { x: 890, borderColor: '#999', strokeDashArray: 5 },
      {
        x: 828,
        // x2: 90,
        borderColor: '#999',
        // opacity: 0.3,
        // offsetX: -1,
        offsetY: 5,

        label: {
          position: '',
          style: {
            color: '#999',
            cssClass: 'sample',
          },
          // text: 'X-axis annotation - 22 Nov',
        },
      },
    ],
  },

  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
    width: 3,
  },

  title: {
    text: 'Downloads',
    offsetX: 0,
    offsetY: 0,
    align: 'left',
    style: {
      fontSize: '14px',
      fontFamily: 'Gordita',
    },
  },

  xaxis: {
    type: 'category',
    categories: [
      1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33,
    ],
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
    tooltip: {
      enabled: false,
    },
    title: {
      text: 'Dates',
      style: {
        fontSize: '12px',
        fontFamily: 'Gordita',
        fontWeight: 600,
      },
    },
  },

  yaxis: {
    min: 0,
    max: 140,
    tickAmount: 7,
    floating: false,
    tooltip: {
      enabled: false,
    },
    labels: {
      style: {
        colors: '#8e8da4',
      },
      offsetY: -7,
      offsetX: 0,
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  fill: {
    opacity: 0.9,
    colors: undefined,
    type: 'solid',
    gradient: {
      shade: 'dark',
    },
  },

  tooltip: {
    enabled: false,
    enabledOnSeries: undefined,
  },

  markers: {
    // color: #C14E48,

    strokeColors: '#999',
    strokeWidth: 0,
    strokeOpacity: 2,
    strokeDashArray: 3,
    fillOpacity: 5,
    size: [4, 7],
    // fillOpacity: 1,
    shape: 'circle',
    discrete: [
      {
        seriesIndex: 0,
        dataPointIndex: 0,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 1,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 2,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 3,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 4,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 5,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 6,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 7,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 8,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 9,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 10,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 11,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 12,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 13,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 14,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      {
        seriesIndex: 0,
        dataPointIndex: 15,
        fillColor: '#C14E48',
        strokeColor: '#999',
        size: 3,
        shape: 'circle',
      },
      // { seriesIndex: 0, dataPointIndex: 16, fillColor: '#C14E48', strokeColor: '#999', size: 3, shape: 'circle',},
      // { seriesIndex: 0, dataPointIndex: 17, fillColor: '#C14E48', strokeColor: '#999', size: 3, shape: 'circle',},
      // { seriesIndex: 0, dataPointIndex: 18, fillColor: '#C14E48', strokeColor: '#999', size: 3, shape: 'circle',},
      // { seriesIndex: 0, dataPointIndex: 19, fillColor: '#C14E48', strokeColor: '#999', size: 3, shape: 'circle',},
      // { seriesIndex: 0, dataPointIndex: 20, fillColor: '#C14E48', strokeColor: '#999', size: 3, shape: 'circle',},
    ],
  },
};

.html code

<div class="row card" id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [stroke]="chartOptions.stroke"
    [dataLabels]="chartOptions.dataLabels"
    [fill]="chartOptions.fill"
    [yaxis]="chartOptions.yaxis"
    [title]="chartOptions.title"
    [colors]=" ['#EF7624']"
    [tooltip]="chartOptions.tooltip"
    [annotations]="chartOptions.annotations"
    [markers]="chartOptions.markers"
  ></apx-chart>
</div>

0reactions

github-actions[bot]commented, Sep 30, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Top Results From Across the Web

Topic: How can i do multiline text in Annotation? - QElectroTech

Hello polygon13, the widget with dynamic texts is only available in version 0.7 dev. In version 0.6 you have to use spaces so...

Annotation Text with multiple lines. - WaveMetrics

Hi, I am trying automate an analysis. In the loop, I do multiple curve fits and record the values in a string for...

About Multiline Text Format | AutoCAD 2021

You can create and edit multiple columns in multiline text using the In-Place Text Editor column options and column grips. Editing columns using ......

Annotate Multiple Lines of Text to ggplot2 Plot in R (Example)

First, I'll show how to annotate text in one line to a ggplot2 scatterplot using the annotate function:

Java annotation utility for multiline text - Stack Overflow

This underscores why my question needed to be voted down for mixing up the two. - At compile time = Annotation Processors. Whereas,...