Is there a away to add an extra label at the bottom if a pie graph like this:
Yes, you can do it as follows:
options: {
legend: {
display: true,
title: {
display: true,
text: 'Custom Chart Title',
position: 'bottom'
}
}
You can also find some more details on the official documentation, here:
Chart JS Legend Official Documentation
Related
I am using Doughnut chart of chart.js in a react js application. I would need the same look and feel for the legend than illustrated by:.
I have gone through the Chart.js documentation but I am helpless!
You have to add this at options, see next:
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
}
}
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration here you can see all options what you can add to labels, see padding also, default is 10 you need only add boxWidth.
So I am trying to display a nice chart using Chart.js inside a Vue.js component... Should not be so complicated but I am hitting a wall there.
Here is my component code (syntax is based on Vue.js webpack boilerplate)
<template>
<canvas v-el:canvas style="width: 100%; height: 200px"></canvas>
</template>
<script>
import Chart from 'chart.js'
export default {
compiled: function () {
// fetch canvas DOM element
let canvas = this.$els.canvas
// init chart.js
let chart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
console.log(chart)
}
}
</script>
I simplified the component as much as I could, and used data from the doc example (will bind real data using props later).
So I keep getting this error in the console :
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
I looked it up, it seems that this has something to do with the variable passed to getComputedStyle used in Vue.js.
My best guess would be that this.$els.canvas does not return the right object. But if I output it in the console using console.log it seems right.
console.log(canvas)
// outputs <canvas style="width: 300px; height: 150px;"></canvas>
console.log(canvas.tagName)
// outputs CANVAS
console.log(canvas.style.height)
// outputs 200px
Hmmm this is actually weird and could be helpful : did you notice that I set the canvas style.height in the template, but if I do console.log(canvas) I see height: 150px but if console.log(canvas.style.height) 2 lines below, I get 200px as an output ?!! WTF is going on ?.. Vue is messing with my head right now
Link to jsFiddle for you to play with (check out the result in the console)
https://jsfiddle.net/kartsims/g8s12yd2/3/#&togetherjs=CQrzT996AR
I figured out why and will let you know, just in case someone happens to be in the same position :
I couldn't get this to work inside a vue component displayed by Vue Router... I figured that it was because I should have used ready hook instead of compiled... At compiled, the DOM is not fully ready yet.
I'm using the latest chartJS and attempting to create a pie or doughnut chart. This seems like it should be relatively simple to me, but whenever the chart is created the top is cutoff like the image below. I've tried many things to fix this, and searched around with no luck. Has anyone run into this before? Is ChartJS no longer supported in most browsers?
I've seen other pie charts in JSfiddle that people have working, copying the exact same code into new files results in the same chopped off top graphs.
Other graphs work such as line/bar.
Edit: made some progress by changing the chart to load using windows.load. It will now display correctly when the page is resized at all, but will display the same way below initially.
Here is the HTML and JS code.
<div class="container-graph-window">
<canvas id="pieChart" width="435" height="435"></canvas>
<script>
pieChart();
</script>
</div> <!-- End continer-graph-window-->
/////////////////////////////////////////////JS CODE
function pieChart() {
var doughnutData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
var ctx = document.getElementById("pieChart").getContext("2d");
window.pieChart = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
} //end pie chart
Note: I must pass data into the JS function and use it to create the graph.
SOLVED: Update all of your Chart.js files if you run into this issue to the latest version.
I am using Zurb-foundation 5 Joyride for a tour guide. It has been pretty helpful. I have a div split into few vertical divs. I was trying to display an info for each vertical div but those tips are coming at the bottom/ top instead of coming at right/ left.
demo
http://codepen.io/chetang/full/pAvmf/
The docs aren't clear on how to achieve it. Any suggestions!!
You will need to define the location patterns in joyride before using them as shown below.
$(document).foundation({
joyride : {
tip_location: 'top',
nub_position: 'auto',
tip_location_patterns : {
top: ['top'],
bottom: [], // bottom should not need to be repositioned
left: ['right', 'top', 'bottom'],
right: ['left', 'top', 'bottom']
},
}
});
For more clarity Visit http://codepen.io/Parteek/pen/ohHlc.
I have a question about Google Chart API.
I'm working on Bar Chart to show a stacked bar graph.
Here's a problem that legend texts are duplicated as shown in the image below.
I set an option like this.
var options = {
isStacked: true,
legend: {position:'bottom'},
backgroundColor: {fill:'#f5f5f5'},
width: 350,
colors:['#32bb32','#06abe8','#ffcb05','#f15a22']
};
Do you have any idea?
Messing about with google charts can get a bit, well, messy. A terrible solution that happens to get the job done is to insert an excessive number of white spaces after your label, then increase the font size under text style like so:
legend: { position: 'bottom', alignment: 'center', textStyle: { fontSize: 15,}},
This is a quick and dirty solution to annoying overlapping in the legend.
With google charts, nearly all problems can be fixed using custom templates, but this solution will hold if you just want to wash your hands of the problem and move on.