apexcharts.js
apexcharts.js copied to clipboard
Prints out PNGs and SVGs without overwriting custom/modified legend and markers.
Description
For some reason, ApexCharts prints out PNGs
and SVGs
without overwriting custom/modified legend and markers.
I've installed jsPDF
to download my chart to .pdf
obviously, but it takes one of two files which are already unwanted due to its lack of my custom legend and markers.
In ApexCharts ther is a feature to make a custom marker even with example. Even if I modify the markers, they newer showed up in exported image.
Steps to Reproduce
- For my custom markers I've used:
// javascript
legend: {
horizontalAlign: 'left',
markers: {
customHTML: function() {
return `<span class="custom-marker"><i class="fas fa-square-check"></i></span>`;
}
},
itemMargin: {
horizontal: 10,
},
},
- To modiffy styles I've wrote:
/* css */
.apexcharts-legend {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
grid-template-rows: auto auto !important;
gap: 5px !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
.apexcharts-legend-series:nth-child(odd) {
grid-row: 1 !important;
}
.apexcharts-legend-series:nth-child(even) {
grid-row: 2 !important;
}
.apexcharts-legend-marker, .apexcharts-legend-text {
margin: 0 !important;
display: flex !important;
align-items: center !important;
Expected Behavior
My Expected behavior is in this image. As you can see, plotted data has it own legend with elements divided into columns with Awesome Font signs. In the right top corner You can see a Pdf icon for downloading this chart to .pdf
Actual Behavior
And here is how it really behaves:
There are no markers, columns are gone. It basically returned to the default state.
Screenshots
Reproduction Link
https://codepen.io/MarcinJaracz/pen/oNroZog