Following this example on their site, how would I move the "My First Dataset" legend to, say, below the chart instead of on top of it?
It doesn't appear to be a part of the documentation that I could find
According to mentioned http://www.chartjs.org/docs/#chart-configuration-legend-configuration, you need to add legend to options:
Chart.Bar(canvas, {
data: data,
options: {
legend: {
position: "bottom"
}}
})
See working jsfiddle.
Related
Is it possible to render a chart with "inline" labels between horizontal bars in ChartJS?
You can use chartjs-plugin-datalabels for this which is very useful when displaying labels on data for any type of charts and is highly customizable.
Note that this requires Chart.js 2.7.0 or later.
Use it by including it under the plugins key of your chart options as shown in the following solutions below.
Solution #1.
The configuration below will display your labels on the top center of each bar. See working example.
var options = {
plugins: {
datalabels: {
// use the formatter function to customize the labels displayed
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
align: "top",
anchor: "center",
offset: 25,
padding: -2,
clip: true,
font: {
size: "16",
weight: "bold"
}
}
}
};
However, this is not exactly like the screenshot you provided so,
Solution #2.
Here's one workaround I can suggest to replicate the exact behaviour that you want.
anchor: 'start' and align: -60: that will bring your data label on top, left aligned
make your chart start at zero by setting scale.ticks.beginAtZero to true
offset: 25: distance (in pixels) to pull the label away from the anchor point
padding: function() {}: use a scriptable option to dynamically compute the left padding based on the label approximate size since adding a specific padding will only work if your labels have the same width that doesn't change which is not this case
See working example for a detailed overview of the configurations.
This solution will work but it's definitely not ideal since the
position of these labels may change depending on the label size, bar
thickness, and the size of the chart.
Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.
From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};
I'm not talking about the y-axis nor the x-axis but the the label on the line.
I've searched the documentation and stack overflow but I can't find the answer.
I guess you are looking something like this.
plugins: {
datalabels: {
display: false,
},
}
I am having an issue when trying to make long legend labels to fit inside the canvas. Please have a look at the fiddle
I can't find any options or fixes for this.
How can I make the long labels to fit inside the plot area? Please advice.
Simply set width for legend and for items, to tell Highcharts what is proper width. Example: http://jsfiddle.net/Fusher/xvpj7frs/3/
legend: {
width: 300,
itemStyle: {
width: '250px'
}
},
Of course that solution has limitation - legend isn't responsive anymore.
I am experimenting with the FLOT plot tool and having some problem with the legend. Specifically, the CSS for the legend must be being overwritten somewhere in my code because the legend is looking like this:
When I try to pass legend options to the plot, they do not appear. What do I need to do fix this CSS problem? Thanks.
Here is some of the code I am working with:
var options = {
series: {
lines: { show: true },
points: { show: true },
legend: {
margin: 5
}
}
};
$.plot("#flotcontainer", [ json ], options);
The margin option from flot specifies the distance to the plot edge which seems about right at 5 pixels. Try to set the position option too (see the documentation for more information).