skip to Main Content

Hey I have been trying to do this for quite some time now but I can not move the labels of the line series to the bottom of the line in ag grid charts. Does anyone know how to do this ? I have attached the example from the docs below.

So instead of having the labels (numbers) north of the marker I want them south.

const ChartExample = () => {
  const [options, setOptions] = useState({
    autoSize: true,
    data: getData(),
    theme: {
      overrides: {
        line: {
          series: {
            highlightStyle: {
              series: {
                strokeWidth: 3,
                dimOpacity: 0.2,
              },
            },
          },
        },
      },
    },
    title: {
      text: 'Road fuel prices',
      fontSize: 18,
      spacing: 25,
    },
    footnote: {
      text: 'Source: Department for Business, Energy & Industrial Strategy',
    },
    series: [
      {
        type: 'line',
        xKey: 'date',
        yKey: 'petrol',
        stroke: '#01c185',
        label: {
          enabled: true,
        },
        marker: {
          stroke: '#01c185',
          fill: '#01c185',
        },
        tooltip,
      },
      {
        type: 'line',
        xKey: 'date',
        yKey: 'diesel',
        stroke: '#000000',
        marker: {
          stroke: '#000000',
          fill: '#000000',
        },
        tooltip,
      },
    ],
    axes: [
      {
        position: 'bottom',
        type: 'time',
        tick: {
          interval: time.month.every(2),
        },
        title: {
          text: 'Date',
        },
        label: {
          autoRotate: true,
        },
      },
      {
        position: 'left',
        type: 'number',
        title: {
          text: 'Price in pence',
        },
        label: {
          autoRotate: true,
        },
      },
    ],
  });

  return <AgChartsReact options={options} />;
};

enter image description here

I have been through the docs and can not find the solution. The api does not have an option for placement like the other series. Alternatively I was unable to use custom css but maybe someone has tried this before.

Please help if you can.

2

Answers


  1. The api does not have an option for placement like the other series. Alternatively I was unable to use custom css but maybe someone has tried this before.
    I will suggest sample code..

    Login or Signup to reply.
  2. We have an option called ‘tooltip’

    enter image description here

    tooltip: {
      position: {
        xOffset: 50,
        yOffset: 50
      }
    },
    

    Result:

    Result

    I’ve got a plunker ready for you: https://plnkr.co/edit/tPBhshaEcxVOLGJ7?preview

    Further reading

    https://www.ag-grid.com/react-charts/api/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search