For values of 0, Flot likes to draw a flat line where the bar would be. Is it possible to configure it to draw nothing?
In my application I solved this issue by setting yaxis min to a value greater than 0 and less than the resolution I was working with. Borders visible, flat line hidden.
var options = {
series: {
stack: 0,
lines: { show: false, fill: true, steps: false },
bars: { show: true, barWidth: 0.6 }
},
xaxis: {
mode: "time",
timeformat: "%H:%M"
},
yaxis: {
min: 0.5
},
selection: { mode: "x" },
grid: { hoverable: true }
};
You can set the value to null when it's zero and that will prevent it from showing and allow you to keep borders around other bars.
One solution: set the lineWidth of the bars to 0. This eliminates the border around the bars.
This comes at the cost of the nice visibility for small values Flot has. With borders, even when your chart has large values, 1 and 2 for example are distinct. Without borders, the small numbers can be hard to see, but this effect can be offset by sticking to darker fillColor values for your bars.
Related
So I have a dataset with about 300 points and I can display it just fine using chart.js. However, when I change the size of the window, I notice that the ticks get all mushed up together as the canvas resizes with the window.
scales: {
x: {
type: "linear",
grid: {
display: false,
},
ticks: {
autoSkip: true,
maxRotation: 0,
maxTicksLimit: 3, // How do I make bigger windows show more ticks?
// vs Smaller windows show fewer ticks?
stepSize: 15,
callback: function (value) {
return `${value}`;
},
},
},
So this is what I have so far. I looked into the docs and found that maxTicksLimit limits the number of ticks displayed. But I don't know how to make it dynamic based on the window size. I'm sure it's something simple that I'm missing, but I can't seem to find the answer.
Thanks.
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
I'm using chart.js in my project where I'm having a daily-ticked time scale on the X axis and two linear scales on the Y axis. On one linear scale I'm rendering an usual line chart representing a chronological trend while rendering multiple stacked bar charts on the other linear scale, representing average stats for each day. Pre-v3 versions of chart.js were dictating to use a general chart type bar for this to work, and in my case it did even on a time scale. Only workaround I had to use to was to set the bar chart data to 12:00pm to have it centered on the day while also setting the barThickness manually, as it will default to 0 (?) on a time scale otherwise.
Now I've recently updated to v3.2.0 and adjusted my options and datasets according to the migration documentation. Rendering the charts I noticed that the scale ticks were offset by half a day, thus both charts being off. After some research I found out that it was due to the offset option for the scale being enabled as I was using a bar chart.
Manually turning off the offset option is to no avail either though. Besides the time scale not using up another day anymore, the ticks are still off by half a day.
Cutting out the bar chart dataset resets the ticks back to normal. Unfortunately there doesn't seem to be a way to apply the offset only to the bar charts. Does anyone have an idea how to deal with this?
I have now created a Codepen example for this.
scales: {
x: { // time scale
type: 'time',
offset: false,
time: {
unit: 'day',
displayFormats: {
day: 'iii, dd.MM'
}
},
bounds: 'ticks',
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
title: {
display: true,
text: 'Date'
}
},
yT: { // line chart scale
position: 'right',
beginAtZero: false,
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
ticks: {
maxTicksLimit: 24,
stepSize: 9000,
callback: (duration) => String(duration / 3600) + 'h'
}
},
yR: { // bar chart scale
position: 'right',
beginAtZero: false,
grid: {
color: "#444",
zeroLineColor: "#888",
zeroLineWidth: 2
},
ticks: {
maxTicksLimit: 48,
stepSize: 10800,
callback: (duration) => String(duration / 3600) + 'h'
},
title: {
display: true,
text: 'Duration'
},
stacked: true
}
}
I opened an issue on GitHub where I was told that I also had to explicitly set the grid.offset option to false, and this fixed it for me.
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.
I am checking Stacked Charts in Flot and I found out something weird in the Bar Chart.
I tried using this :
http://jsfiddle.net/zNXBd/41/
In this sample codes, try to hover your mouse on the stacked lines. Hover is working.
Now, this time, please try to change "lines" to "bars" and run again.
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
bars: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack:true,
bars: {
show: true,
fill: true,
order: 3,
}
});
Notice that the bars are not anymore hoverable. Seems like there's an issue in this part.
Could you please help me how to fix this issue?
It seems your bars are too thin for the hover to trigger.
You might need to put a barWidth in your bars options.
By default, the barwidth is 1, in x-axis unit. In a time axis, 1 = 1ms, and at your scale, a one ms width bar isnt represented (we only see the stroke, not the bar itself)
From the doc:
"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.
example:
bars: {
show: true,
fill: true,
order: 2,
barWidth: 1*3600*1000
}
Here is your fiddle with barwidth set at 1 hour:
http://jsfiddle.net/zNXBd/42/