apexcharts.js icon indicating copy to clipboard operation
apexcharts.js copied to clipboard

Prints out PNGs and SVGs without overwriting custom/modified legend and markers.

Open MarcinJaracz opened this issue 6 months ago • 0 comments

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

  1. 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,
		},
	},
  1. 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 propre_chart

Actual Behavior

And here is how it really behaves: mychart There are no markers, columns are gone. It basically returned to the default state.

Screenshots

Reproduction Link

https://codepen.io/MarcinJaracz/pen/oNroZog

MarcinJaracz avatar Aug 13 '24 11:08 MarcinJaracz