0

I am using react-chart js in my graph I am drawing a multi-vertical line using annotation this my sample code i had used to draw line 

const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
    const splitArrayPopup = map(testValue, el => ({
      type: 'line',
      mode: 'vertical',
      scaleID: 'x-axis-0',
      value: parseFloat(el),
      borderColor: '#e0e2e2',
      borderWidth: 1,
      borderDash: [3, 3],
      label: {
        content: parseFloat(el),
        position: 'bottom',
        enabled: true,
        backgroundColor: 'transparent',
        fontColor: '#e0e2e2',
        fontStyle: 'normal',
        yPadding: 0,
        yAdjust: -10,
      },
    }));

i need to show my label text at bottom of the graph i mean outside the graph, right now for me going inside the graph.

beaver
  • 17,333
  • 2
  • 40
  • 66
6round
  • 182
  • 4
  • 18
  • 2
    To avoid labels cutting of, you can try setting min/max for axis. Check my answer here: https://stackoverflow.com/questions/48861122/chart-js-data-point-between-bar-charts/48900184#48900184 and the comments as well – beaver Feb 21 '18 at 13:16

0 Answers0