I'm trying to remove all default labels from chartjs doughnut charts but the one at the bottom doesn't seem to go away
There was initially one legend at the top but I managed to hide that ut now I'm faced with labels at the bottom which completely ruin the chart
here's my options property in my config
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
}
I want all labels and legends to be gone completely so I can define my one with HTML, CSS and custom javascript
Here's a screenshot of what's happened
messed up chart that makes me want to cry
You must have some global settings or other code that is causing the x-axis to be displayed, as it is not configured in your options above and is not the default.
I put together a sample chart that shows the x-axis being displayed similar to yours.
If you turn this off in your options, that should no longer be shown. You can toggle that setting to show/not show in the demo to see the difference.
options: {
cutoutPercentage: 80,
legend: {
display: false
},
tooltips: {
enabled: false,
},
scales: {
xAxes: [{ display: false }] // <-- add this
}
}
Related
I am attempting to remove the labeling of my treemap. design Although I do want to reveal the name when hovering over the square of the tree-map; I am attempting to remove the titles of each square such as In Store, Retail, Online, Street Vendors etc..... But like mentioned earlier I do want to show the title when hovering over which is why I did not remove the names entirely;
I've tried accomplishing this goal by editing the dataLabels object; and setting enabled: false, I've also adjusted the styling of font and alignment in hopes to affect the text but that did not work either.
Here is a link to my highcharts jsfiddle example:
This can be accomplished by setting the dataLabels option on plotOptions. Like this:
Highcharts.chart('container', {
series: [...],
title: {
text: 'Sector'
},
plotOptions: {
series: {
dataLabels: {
enabled: false
}
}
}
});
Highcharts API
Notice that the dataLabels options object should be defined in the series options object, not the level one.
Demo: https://jsfiddle.net/BlackLabel/hx4pjzg3/
series: [{
dataLabels: {
enabled: false
}
}]
API: https://api.highcharts.com/highcharts/series.treemap.dataLabels
i am using chart.js for making the charts. i have successfully done the graph things. Just i want a help in this regard that sometimes there could be just 30-40 points to plot. but usually there are about 1000 points.
So what is the good option which i can use for better analysis for this reporting tool. Like is there any option of blow up specific point or i can use a scroll to scroll my chart and expand it horizontally, a very large.
this is my chart image.
u can see there are many points and all are congested. i want to know what is the suitable solution.
This is my chart configuration in which i have set it to the responsive.
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
Update: After searching and creating an issue on the official chartjs git repository . This is not possible for the category/simple x-axis lines. This mean you cannot add pan through the chart in this way using the category/simple scales on x-axis. however zooms still works fine.
Editing this question for the future readers.
P.s: Leave a comment in case of negative voting.
Check out chartjs-plugin-zoom. It is a plugin that adds the capability to zoom in/out and pan left/right/up/down to view the rest of your data that is not currently displayed on the zoomed chart.
Here is a live codepen example.
I'm not sure it will do exactly what you need, but its a great place to start (you can use this as a base and extend it to your needs). This plugin is also developed/supported by the same team as chart.js.
I tried to find a lot about this but didn't get the answer. For waterfall charts in Highcharts
legend: {
enabled: true
}
didn't seem to work. Can you suggest how can we display legend on a waterfall chart? Also, can we have the value of 'y' for every column displayed on top of the column, instead of being displayed on the column? For this change, with most of the other charts,
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
But this didn't work with waterfall charts.
And finally, is there a way we can make the sum bar look like an aggregate of the other bars in terms of color as well? Like, in the example shown -
My code is here - http://jsfiddle.net/yr779/236/
I am not sure what you are asking regards to the legend. Your jsFiddle is showing a legend - you only have one series "Series 1" and it is in the legend. To display the value of each waterfall you need to use the correct plotOptions:
plotOptions: {
waterfall: {
dataLabels: {
enabled: true,
crop: false,
inside: false,
overflow: 'none'
}
}
},
I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:
scales: {
yAxes: [{
gridLines: {
display: false,
drawTicks: true,
}
}],
}
What I have:
What I want:
The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.
To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.
scales: {
yAxes: [{
gridLines: {
display: true,
drawOnChartArea: false,
}
}],
}
EDIT:
JSFiddle
What you need for this are Chart.js plugins.
They let you handle what is happening when events like the rendering or the update are triggered.
For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :
Chart.pluginService.register({
afterDraw: function(chart, easing) {
// Your code in here
}
});
Now that you know how to do, let's focus on what to do.
What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).
We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.
To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.
Here is a jsFiddle (improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :
I have 2 pie charts and each have 2 legends. i want to position 2 on right and 2 on left..how would i do that ?
I tried to add legend in a series rather than chart...but it did not work...
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
type: data.series[i].type,
showInLegend: true,
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:100,
itemStyle: {
textDecoration: 'underline'
}
},
}
});
any clues or guidelines would be appreciated...
Thanks
From what I know, each chart can only have one legend, and that needs to be configured using the "legend" attribute for the entire chart, not per series.
I would suggest using the renderer methods (http://api.highcharts.com/highcharts#Renderer) to display a fixed, HTML-style legend, or use HTML/CSS to create a legend (which would technically live outside the chart) where the items are clickable.
Here is an example I created with a custom legend: https://www.frbatlanta.org/chcs/labor-market-distributions.aspx (see the parts with the checkboxes and drop-down menus). It is easy enough to create a click event from your custom legend to show/hide the associated series.
I'll be glad to edit a fiddle, if you provide one.