wuba / wuba/react-native-echarts

Unable to use SVG in markline label.formatter

Open
#111 0 comments 1 reaction 1 assignee View on GitHub

@iambool is already working on this.

Since Sep 14, 2023.

Dominant language
TypeScript
Stars
967
Forks
35
PR merge metrics
No merged PRs in 30d

Description

Code:

	markLine: {
							
	symbolKeepAspect: true,
	symbolSize: [20, 20],
	label: {
		position: 'insideEndBottom',
		distance: 10,
		formatter: function (params) {
			return `<svg class="svg-icon" viewBox="0 0 20 20">
				<path d="M15.475,6.692l-4.084-4.083C11.32,2.538,11.223,2.5,11.125,2.5h-6c-0.413,0-0.75,0.337-0.75,0.75v13.5c0,0.412,0.337,0.75,0.75,0.75h9.75c0.412,0,0.75-0.338,0.75-0.75V6.94C15.609,6.839,15.554,6.771,15.475,6.692 M11.5,3.779l2.843,2.846H11.5V3.779z M14.875,16.75h-9.75V3.25h5.625V7c0,0.206,0.168,0.375,0.375,0.375h3.75V16.75z"></path>
			</svg>`;
			},
		fontSize: 10,
		fontWeight: 'bold',
		borderWidth: 1,
		borderRadius: 5,
		padding: 5,
		rotate: 360,
		backgroundColor: '#fff',
	},

	data: [
		{
		xAxis: new Date().getTime(),
		},
							
	],
},

I cant get any svgs to work and would appreciate any help possible.

What I'm trying to make:

Screenshot 2023-09-14 at 11 37 17 AM

Using SkiaChart for this if that matters.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.