I built this chart using Apex charts
But both the 'Chart' title and the caption are not aligned, the title should be aligned relative to the graph, and the vertically aligned caption.
the title aligned so by placing the property align: 'center'
but my main problem is in the legend, I went behind the documentation and found this mand verticalAlign: 'middle'
to be used inside the ´legend:´ property.
Does anyone know how to make this work properly?
I built this chart using Apex charts
But both the 'Chart' title and the caption are not aligned, the title should be aligned relative to the graph, and the vertically aligned caption.
the title aligned so by placing the property align: 'center'
but my main problem is in the legend, I went behind the documentation and found this mand verticalAlign: 'middle'
to be used inside the ´legend:´ property.
Does anyone know how to make this work properly?
Share Improve this question edited Aug 2, 2019 at 19:25 Lucas asked Aug 2, 2019 at 16:40 LucasLucas 3018 silver badges37 bronze badges3 Answers
Reset to default 4The solution for vertically aligning the legend would be:
.apexcharts-legend {
justify-content: center !important;
top: 0 !important;
}
because you have to force overwrite the default which is justify-conent: flex-start
edit:
you also need top: 0 !important
to really get it centered but that might mess up your other charts
I guess for you this answer is one year too late but maybe it's helpful for someone else.
There is no property called verticalAlign
for the legend.
You can vertically align the legend to center with CSS
.apexcharts-legend {
justify-content: center;
}
we can use the position attribute of the legend hash of apex chart.
Set
position: 'right'
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'bottom',
horizontalAlign: 'center',
floating: false,
fontSize: '14px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
formatter: undefined,
inverseOrder: false,
width: undefined,
height: undefined,
tooltipHoverFormatter: undefined,
customLegendItems: [],
offsetX: 0,
offsetY: 0,
labels: {
colors: undefined,
useSeriesColors: false
},
markers: {
width: 12,
height: 12,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
customHTML: undefined,
onClick: undefined,
offsetX: 0,
offsetY: 0
},
itemMargin: {
horizontal: 5,
vertical: 0
},
onItemClick: {
toggleDataSeries: true
},
onItemHover: {
highlightDataSeries: true
},
}