I am using JQuery Flot graph plugin to plot some bar charts in a page. when I plot a graph by datas and option below:
var chartData = [{
label: 'success',
data: [[0,1],[1,1]],
bars: {
order: 0,
fillColor: '#fff'
},
color: '#fff'
}, {
label: 'fail',
data: [[0,3],[2,1]],
bars: {
order: 1,
fillColor: 'rgba(255,255,255,0.5)'
},
color: 'rgba(255,255,255,0.5)'
}];
var barChartOptions = {
...
legend:{
container: '.flot-chart-legends--bar',
backgroundOpacity: 0.5,
noColumns: 0,
lineWidth: 0,
labelBoxBorderColor: 'rgba(255,255,255,0)'
}
};
$.plot($('.flot-bar'), chartData, barChartOptions);
It works for my bar chart, however, the other charts which hasn't label attached the same label. How can I do for it? Please help!
I sovled it! Check the source code in flot.js and found the incorrect code as follow:
$(options.legend.container).html(table);
which makes all the selectors of container contained the same html. I corrected it like this:
placeholder.parent().find(options.legend.container).html(table);
and the html is only attahced to the right chart I want.
Related
For some reason, the legend on this doughnut chart created with chart.js is not moving to the right. Even tried adding the rule to chart creation itself instead of putting it in the variable
EDIT
With further inspection, it appears any options that are set to the legend do not appear to be working.
const mobileData = {
labels: ["Desktop", "Tablet", "Phons"],
datasets: [{
label: '# of Users',
data: [2000, 550, 500],
borderWidth: 0,
backgroundColor: [
'#7477BF',
'#78CF82',
'#51B6C8'
]
}]
};
const mobileOptions = {
legend: {
position: 'right',
labels: {
boxwidth: 20,
fontStyle: 'bold'
}
}
}
let mobileChart = new Chart(mobileCanvas, {
type: 'doughnut',
data: mobileData,
options: mobileOptions
});
Here's a fiddle to the project minus images.
https://jsfiddle.net/5j2ucpv6/3/
You are using the new V3 version of the lib instead of V2
So please read the migration guide from chart.js (https://www.chartjs.org/docs/latest/getting-started/v3-migration.html)
The legend options have been moved to the plugin section like this
options: {
plugins: {
legend: {
position: 'right'
}
}
}
My Chart.js pie is working fine, but when I add the legend option, it disappears, much to my dismay. Other options like title and animation work pretty well, only the legend options ruins the pie. I have looked at the code thoroughly, but can't figure out what I'm not doing right. Below is my code:
if ( $('#broadsheet_piechart_sample').length ) {
var ctx = document.getElementById("broadsheet_piechart_sample");
var data = {
datasets: [{
data: [10, 20, 30, 40, 50],
backgroundColor: ['#455C73', '#9B59B6', '#BDC3C7', '#26B99A', '#3498DB'],
}],
labels: ['Dark Gray', 'Purple', 'Gray', 'Green', 'Blue']
};
//options
var options = {
title: {
display: true,
position: "top",
text: "Test Pie Chart",
fontSize: 18,
fontColor: "#111"
},
animation: {
duration: 0
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
var broadsheet_piechart_sample = new Chart(ctx, {
data: data,
type: 'pie',
options: options
});
}
You are may using an old version which can cause this issue.
Please upgrade to the latest CharJs version (2.7.3).
Here is what I did for example : example Just exactly what you did.
I'm trying to change the background color of labels in a Polar Chart. I want to change the background color to black.
I'm using the global variable to change the font color:
Chart.defaults.global.defaultFontColor = 'rgba(255, 255, 255, 0.7)';
This is the chart that is shown.
Chart Printscreen
new Chart(ctx, {
data: data = {
datasets: [{
data: [25, 10, 20],
backgroundColor: [
'yellow',
'blue',
'red',
],
borderColor: [
'yellow',
'blue',
'red',
],
}],
labels: [
'Yellow',
'Blue',
'Red',
]
},
type: 'polarArea',
});
Thanks for the attention!
I checked the official documentation, and they seemed to have the same issue, especially when changing the theme to 'Night' or 'Sepia' from 'White'.
However, under further inspection, I found this GitHub issue that explained it.
After type: 'polarArea', add the following code to change the background-color of the text elements:
options: {
scale: {
ticks: {
backdropColor: 'black'
}
}
}
There is also a JSFiddle I made, which is here. Also, in this GitHub issue, I found that docs for this is under Linear Radial Axis, not in Polar Area. Hope that helps!
I will like to add an horizontal line to a stacked flot chart. Thought that I could just create a shaded area but got stuck on how to remove the rest of the area below it.
Here is a working fiddle: http://jsfiddle.net/cefx1eq2/1/ where the labeled "horLine" is where I will like as an example add an hypothetical line like that could mean average, or any type of limit.
Section of data where need help:
{
"label": "horLine",
"color": "#000",
"data": [ ["Comment", 125] ] //changing this data to be only a line
}
You can add markings to the grid options of your chart to draw a line.
grid: {
markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]
}
An example of drawing a black horizontal line through your chart at 125 would look like this:
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc',
markings: [{ yaxis: { from: 125, to: 125 }, color: "#000000" }]
}
so I used the flot-tickrotor plugin to rotate the ticks on the xaxis of my flot chart, the problem now though is, it shows up twice;
do any of you know why this is happenning?
here's the code I'm using for this, you'll notice I'm not specifically adding the ticks;
//sample data
var mainDataSet = {name:'1 - WOMENS OUTERWEAR', Actual: 181.8, Budget:15.7, BudgetVar: 8.4 } ,
{name:'2 - WOMENS LINGERIE', Actual: 12.5, Budget:6.0, BudgetVar: -1.3 } ,
{name:'3 - KIDSWEAR', Actual: 8.7, Budget:13.2, BudgetVar:0.8 } ,
{name:'5 - MENSWEAR', Actual: 4.9, Budget:4.4, BudgetVar: 0.5 } ,
{name:'6 - WOMEN FOOTWEAR+ACCES', Actual: 354.0, Budget:16.5, BudgetVar: 14.7 }
];
var graph_options = {
series: {
lines: { show:false , fillColor:'#CDD0D1', fill:true},
points: { show: false },
color: '#3B80F7',
},
grid: {
hoverable: true,
clickable: true,
show:true,
borderWidth: 0.5,
backgroundColor: { colors: ["#FFF", "#CDD0D1"] }
},
xaxis: {
mode: "categories",
//tickLength: 1,
rotateTicks: 45
}
};
var barGraphData = []; //graph_settings
var graph_settings = {label: dataSets[c].label,
data: mainDataSet,
bars: { show: true , align: "center", barWidth: 0.5},
color: '#3B80F7'
};
barGraphData.push(graph_settings);
var barGraph = $.plot($("#bar_graph_canvas"), barGraphData, graph_options);
Ok, so according the issue log for flot charts this is a known issue for flot since 0.8.1, the work around is to add this in your styling until the issue is resolved;
div.xAxis div.tickLabel { display:none }
NB: make sure you put this in a style tag INSIDE YOUR HEAD TAG or BEFORE you include your flot chart plugin, so that the default styling can be overridden