I am using flotchart JS for showing bar graphs. However, I can't seemed to fix the spacing between bars.
I have enabled panning already. However, sets the width of the bar according to the placeholder. How can set each bar's spacing according to its label?
this is my code:
$.plot("#graph", [ data ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
},
yaxis: {
panRange: [0, null],
plotPan: false //pan axis is allowed for plot pan
},
pan: {
interactive: true,
mode: "smart",
active: true
}
});
An alternative solution to your problem could be to rotate the tick labels for example by using the tickrotor plugin:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
rotateTicks: 90
},
You may need to increase the height of the chart since the labels now take up more space. See this fiddle for a full example.
You can achieve this by limiting the number of bars shown at once by giving a max property for the xaxis:
xaxis: {
mode: "categories",
showTicks: false,
gridLines: false,
panRange: [0,null],
max: 7, // set according to your needs, maybe dynamic depending on chart width
min: 0
},
You then have to use panning to see the other bars. See this fiddle for an example.
Related
I am currently using a line-chart with chart.js 3.5.0 and react-chart-js 3.0.4, given two datasets.
The first dataset has data in {x,y}-format with null-values for some y.
When hovering over those null-values, the tooltip jumps to the start of the second dataset. In this case, I would like to hide the tooltip, but approaching the problem with callbacks didn't work.
Has anybody experienced the same issue?
Screenshot
codesandbox
const options = {
interaction: {
intersect: false
},
maintainAspectRatio: true,
animation: false,
plugins: {
tooltip: {
mode: 'nearest',
axis: 'x',
position: 'average',
yAlign: "bottom"
},
},
scales: {
y: {
type: 'linear',
beginAtZero: true,
min: 0,
grace: '20%',
}
},
chartArea: {
backgroundColor: "rgb(240,240,240)"
}
}
You can use mode: 'x' in your tooltip config.
Together with setting pointHitRadius to 0 in both datasets makes it so you dont have duplicate values in your tooltip.
Example: https://codesandbox.io/s/hardcore-brown-1vxcjh?file=/src/components/CChart.jsx
I am working with the chart.js module in order to plot some data and am using the chartjs-plugin-zoom in order to enable zooming and panning however although the zooming works the labels on the x axis will not change for whatever reason.
I have seen similar questions but they all dealt with time series data and therefore the advice was unhelpful.
Here is the plot zoomed out:
and here is it zoomed in:
The key thing to notice is how the labels on the y axis have changed but the x axis labels have not changed. Here is the relevant config variable of the chart:
const config3 = {
type: 'line',
data: {
labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
datasets: [
{
label: "",
backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
borderColor: '#0071BC',
data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
fill: false,
borderWidth: 1,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Peak: -1.2188'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Frequency (Hz)'
},
ticks:{
autoSkip: true,
maxTicksLimit: 20
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Amplitude'
}
}],
},
plugins:{
zoom: {
pan: {
enabled: true,
mode: 'xy',
speed: 20,
threshold: 10,
},
zoom: {
enabled: true,
drag: false,
mode: "xy",
speed: 0.1,
// sensitivity: 0.1,
}
}
},
elements: {
point:{
radius: 0
}
}
}
};
If needed I can provide more code but I imagine the mistake is probably contained in the config. I tried changing zoom.mode to be 'x' but that did not work.
In case someone else comes along this I figured out a solution that is pretty unintuitive.
The first problem is the way that labels are dealt with in chart.js and because they are treated as categories not x data the way that I thought they were. Therfore first you must pass your data in as coordinates in this format:
(as shown in this documentation: https://www.chartjs.org/docs/latest/charts/line.html)
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
And delete the labels variable.
However this will not work with line charts despite what the documentation says. To get around this you can set: type: 'scatter' and inside the dataset write showLine: true
This will generate a line plot where the x labels are auto generated and zooming will work perfectly.
I also think there was a performance boost which is a nice bonus.
http://www.humblesoftware.com/flotr2
I am trying to modify the default font size, weight, and color for the Flotr2 radar chart. I could change this in the flotr2.js file but I want to leave the source file alone.
Currently when I set a larger fontSize in the Flotr.draw call it just spaces out the labels further.
function drawGraph(container, series, ticks)
{
Flotr.draw(container, series, {
colors: colors,
HtmlText: true,
fontSize: 30,
radar: {
show: true
},
grid: {
circular: true,
minorHorizontalLines: true
},
yaxis: {
min: 0,
max: 7,
minorTickFreq: 1,
showLabels: false
},
xaxis: {
ticks: ticks,
titleAlign: 'right'
},
legend: {
position: 'ss',
container: document.getElementById("legendItems")
}
});
}
I'm not sure what else to try...
Accessing the variables from the window object before drawing the graph seems to work well.
window.Flotr.defaultOptions.fontSize = 8;
window.Flotr.defaultOptions.xaxis.color = '#000000';
Couldn't find a way to change the font weight.
I am displaying a area spline dynamic data graph where the dynamic values are fetching from a particular API. The problem is, when the dynamic data are displaying, the graph series goes below the y-axis or above the graph's customized design.
From my side, I found that the problem is with y-axis spacing. So, my question is: could I use a common spacing at y-axis? And the series must display above a particular pixels (height) from x-axis. At the same time, I can use the options min, max, tickinterval because of changing the data from external source.
Here is my y-axis,
yAxis: {
title: {
text: '',
},
opposite: true,
offset: 0,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.5f}'
}
},
gridLineWidth: 0.1,
labels: {
enabled: true,
align: 'right',
x: 10,
format: '{value: .5f}'
},
opposite: true,
minorGridLineWidth: 0,
}
I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});
Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.