Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom point in legend does not display if chart type is Donut #3653

Closed
jarrod-cummings opened this issue Feb 19, 2024 · 1 comment
Closed
Labels

Comments

@jarrod-cummings
Copy link

Description

I'm trying to use a custom symbol, like a rounded square, in the legend for a donut chart that I'm creating. I've been trying to do this through a combination of the legend.usePoint and point.pattern settings. However, I've found that while custom symbol will show up in the legend as expected if the chart type is line, if I switch the chart type to donut it no longer displays.

Steps to check or reproduce

var chart = bb.generate({
  data: {
    columns: [
	["data1", 30, 200, 100, 400, 150, 250],
	["data2", 130, 100, 200, 100, 250, 150],
	
    ],
    type: "line",  // Switch this to donut and the symbol won't display in the legend
  },
  point: {
    pattern: [
      '<rect width="15" height="15" rx="5" ry="5" ></rect>',
    ]
  },
  legend: {
    usePoint: true,
    position: 'inset'
  },
  bindto: "#usePoint"
});
Screenshot 2024-02-19 at 5 38 59 PM Screenshot 2024-02-19 at 5 39 11 PM

I inspected the html for the chart and I found that the symbols in the legend are set with a tag that has an href pointing to the symbol which exists somewhere else in the page. When I inspected the html with the chart type set to donut, the href is still there, but the element it is referencing does not seem to exist.
Line chart html:
Screenshot 2024-02-19 at 5 46 58 PM
Screenshot 2024-02-19 at 5 47 08 PM

Donut chart html
Screenshot 2024-02-19 at 5 46 24 PM

@netil netil added the request label Feb 20, 2024
@netil
Copy link
Member

netil commented Feb 20, 2024

Hi @jarrod-cummings, basically custom point defined via point.pattern is an option dedicated to be used for axis based charts. It doesn't work on Arc based chart for that reason.

Let me consider if this approach is generally useful or not.

netil pushed a commit to netil/billboard.js that referenced this issue Feb 22, 2024
Custom point only was available on axis based charts.
This fix will make available for all charts.

Ref naver#3653
netil pushed a commit to netil/billboard.js that referenced this issue Feb 22, 2024
Custom point only was available on axis based charts.
This fix will make available for all charts.

Ref naver#3653
@netil netil closed this as completed in 143282b Feb 22, 2024
github-actions bot pushed a commit that referenced this issue Feb 23, 2024
## [3.11.2](3.11.1...3.11.2) (2024-02-23)

### Bug Fixes

* **legend:** Remove def element added on unload ([cd79502](cd79502)), closes [#3660](#3660)
* **point:** Make point.pattern legend available for any chart type ([143282b](143282b)), closes [#3653](#3653)
* **radar:** Fix working on esm ([5104d9c](5104d9c)), closes [#3658](#3658)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants