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

Hide axes lines and labels? Legends - enable and disable? Option to disable the dots(data points)? #195

Open
anish-g-nair opened this issue Aug 20, 2018 · 10 comments
Assignees
Milestone

Comments

@anish-g-nair
Copy link

anish-g-nair commented Aug 20, 2018

Expected Behaviour

I do not see the option to hide the x and y-axis lines and labels.
I want the chart to be full-width without the axes lines and labels and ticks, just the chart.

Also, is there an option to enable the legends?

I would also want to hide the dots(data points) and show it only when I hover on it.

Also, is there an option to smoothen the curves once the data points are hidden, rather than showing it as pointed(and edgy)?

Actual Behaviour

Please check the attached screenshot.

Steps to Reproduce:

  • Please check the attached screenshot.

NOTE: Have attached a screenshot of how it is right now and how I want it to be.

Frappé Charts version: v1.1.0

frappe-full-width

@anish-g-nair
Copy link
Author

@pratu16x7

Please help me with this.

@anish-g-nair
Copy link
Author

Also, is there a way to take 100% of the entire width. I do not see an option to pass the width as 100%. Or is there a way? Since the doc says, mention the width and height in pixels.

Still haven't received a reply to this ticket - and the previous issues.

@anish-g-nair
Copy link
Author

Also, take a look at these 3 graphs.
The third graph has max value of 59, and so the max value on the labels to the right is 60. Which looks proper, and the area chart has a good height too.

But when the values are in the range of 1000's or 10,000's the graph would simply add too much of y-axis labels. Why so?
Like in the 1st graph, the max value(data-point) is around 13,000. Then why the graph add y-axis labels upto 20,000? This gives the chart less height.
Similarly, in the 2nd graph. But since here the values are in ranges of 1000's the graph has little more height compared to 1st graph.

The logic for y-axis labels should be based on the data-points and it's values. And not on the ranges of values. Or maybe a combination of both.

frappe-charts-axis-labels-issue

@moso
Copy link

moso commented Jan 10, 2019

Hey @anishnair02, sorry for reviving a dead issue. You can remove the axis lines with CSS. The .frappe-chart-class is automatically added to each SVG, making it easy to hit with regular CSS.

/* x axis */
.frappe-chart .x.axis .line-vertical {
    display: none;
}

/* y axis */
.frappe-chart .y.axis .line-horizontal {
    display: none;
}

If you want to remove the numbers on the y-axis, just add a text to the .y.axis-line above, like so:

.frappe-chart .y.axis .line-horizontal,
.frappe-chart .y.axis .line-horizontal text {
    display: none;
}

Legend is removed with:

.frappe-chart .legend {
    display: none;
}

However, I haven't been able to solve how to expand the chart now that values are missing.
I hope it helps.

@ereyes01
Copy link

ereyes01 commented May 3, 2019

@moso Your solution above worked for removing the lines from the chart, but it didn't remove the numbers along the axes. I had to do the following to completely remove all the lines and labels:

/* x axis */
.frappe-chart .x.axis .line-vertical,
.frappe-chart .x.axis text {
    display: none;
}

/* y axis */
.frappe-chart .y.axis .line-horizontal,
.frappe-chart .y.axis text {
    display: none;
}

I noticed that the line and the text were siblings in the DOM tree, so I just removed the .line-horiz/vert from the path to the text element, and it worked. Thanks, though, your solution got me 90% of the way there!

@scmmishra scmmishra added this to the Close 30 milestone Jul 20, 2019
@scmmishra
Copy link
Contributor

This is a feature many have requested. And we see the need for such chart even in other projects we build. We'll implement this in v2 for sure

@richcahill
Copy link

Thanks @scmmishra! Looking forward to v2. In the meantime, have you any suggestion to make the chart full width without the axises?

@Laestry
Copy link

Laestry commented Dec 24, 2022

still no way to disable chart-legend properly?

@uhrjun uhrjun self-assigned this Dec 26, 2022
@uhrjun uhrjun pinned this issue Dec 26, 2022
@senthil-sas
Copy link

x-axis values show like dots, is this possible to disable ?

@GeoffroyFunck
Copy link

GeoffroyFunck commented Jul 5, 2024

@senthil-sas

new Chart("#chart",{
  lineOptions: { hideDots: 1 }, // to get rid of the dots on the lines
  axisOptions: { xIsSeries: true }, // show fewer labels when there are many
  data : {
    labels: ["1","2","3","4","5"],
    datasets:[
      {  name:"first set", values:[0,1, 2, 1, 0]  },
      {  name:"second set", values:[1, 2, 1, 0, 1]  },
    ],
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants