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

[anish-g-nair]

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

[anish-g-nair]

@pratu16x7

Please help me with this.

[anish-g-nair]

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]

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.

[moso]

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]

@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]

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]

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

[Laestry]

still no way to disable chart-legend properly?

[senthil-sas]

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

[GeoffroyFunck]

@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]  },
    ],
  },
})