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} />;
};
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
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..
We have an option called ‘tooltip’
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/