The chart is pretty good when it is normal. but i expect it to adjust the bar width upon zoom. The graph without zoom is as below.
when I zoom into the graph, the bars width remains same, very thin!
Is there anyway that they auto adjust? I saw a link where the example adjusts the bar width with the zoom. But I don't see anything missing. Here's the example : http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
Here's my charting code. Am I missing some setting?
var chart = c3.generate({
bindto: '#chart',
data: {
xFormat: '%m/%d/%y %I:%M %p',
json: final_data,
keys: {
x: 'date',
value: values
},
type: 'bar',
groups: val
},
bar: {
width: { ratio: 0.9 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d'
}
}
},
zoom: {
enabled: true
},
color: {
pattern: colors
}
});
Try removing key value pair "bar".
If the problem still persists, try setting axis.x.tick.fit = false
Related
I'm using ApexchartJS library.
Is it possible to set a candle width or indentation size between separate candle bars for the candlestick chart?
Now I have overlapping of two bars on top of each other.
Please take a look on CodePen:
https://codepen.io/yura_bezhentsev/pen/abOGGZo
This is my options config:
const options = {
series: [{
data: [
{
x: 'First',
y: [6630, 6660, 6623, 6650]
},
{
x: 'Second',
y: [6650, 6663, 6623, 6630]
},
{
x: 'Third',
y: [6630, 6660, 6623, 6650]
}
]
}],
chart: {
type: 'candlestick',
height: 400
},
xaxis: {
type: 'category',
min: 0,
max: 4
}
};
It looks like a bug in ApexCharts when small number of candles are present.
A small workaround is to set the tickPlacement property (you'll lose the ability to zoom though)
xaxis: {
tickPlacement: 'between'
}
I wan't to set all bars the same width, because if I have few bars they get super big, and If I have a lot bars they get very thin.
Here is what I mean:
I have bar width 50 because I tought this was the size of the bar, but it keeps making bars small if the amount increases.
Here is my code:
$(document).ready(function () {
var chart = c3.generate({
bindto: '#stocked',
size: {
height: 320,
width: 1500
},
data: {
labels: ['y',1,2,3,4,5,6],
columns: [
['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
],
groups: [
['MUSCLE', 'FAT']
],
type: 'bar',
colors: {
MUSCLE: '#75e3ff',
FAT: '#23bbe8'
}
},
bar: {
// width: { ratio: 0.8 }
width: 50,
},
axis: {
x: {
type: 'categories',
show: true,
label: {
text: 'Measurements',
position: 'outer-middle'
},
tick: {
format: "%b",
fit: true,
},
},
y: {
label: {
text: '<?php echo $_SESSION["unit"]; ?>',
position: 'outer-middle'
}
},
},
// subchart: {
// show: true
// },
// zoom: {
// enabled: true
// }
});
});
Thanks and greetings!
The width of your bars is the result of the width of your chart and the amount of data you have populating it. My recommendation would be to size your chart or the container holding your chart accordingly. This will prevent having large white spaces in between each of your bars and result in a more uniform look between your charts.
ex: pseudo code of how to determine how wide you chart should be.
var chart = c3.generate({
size: {
height: 240,
width: function () {
return 6 * 20 + 15
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
Here you can see that there of 6 pieces of data and each data is given 20 space and then an extra 15 to account for the axis/labels etc. If each you had 50 data then it should be width: 6 * 20 + 15 ..... of course now you have different width chart but the bar widths and space between bars should be pretty uniform. The more data the longer the chart. You might need to "20" and "15" to get the look you want.
Draw a basic line chart using Chart.js version 2.8.0.
Observe the rightmost data point is cut off. But the leftmost data point (the first data point) looks intact.
I’ve changed the size of the data point circles by changing values of pointRadius. But even in the smallest value, the data point still gets cut off.
I’m not using any plugin or fancy settings. I am filling the chart are with light gray background colour. But other than that, everything else is a box standard Chart.js.
I’ve recreated the issue here:
https://codepen.io/LeoU/pen/gVLybO
And here is my options settings.
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return "£" + parseInt(tooltipValue).toLocaleString();
}
}
},
scales: {
yAxes: [{
gridLines: {
color: "white",
lineWidth: 2
},
ticks: {
beginAtZero: true,
min: 0,
stepSize: 500000,
callback: function(value, index, values) {
return "£" + value.toLocaleString();
},
},
scaleLabel: {
display: true,
labelString: "Median house price"
}
}],
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
},
Has anyone seen a similar problem with Chart.js?
You can use offset
scales: {
xAxes: [{
offset: true
}]
}
I fixed this by adding padding value to the right hand side of the chart.
I played around with the exact number and 4 looked about right for my chart. But I’d imagine the right number will depend on the size of your pointRadius and other variables you have.
This is what it looks like for me with the changes.
options: {
layout: {
padding: {
left: 0,
right: 4,
top: 0,
bottom: 0
}
}
}
For more about padding for Chart.js, this is their instruction page.
https://www.chartjs.org/docs/latest/configuration/layout.html
It is annoying. And, this should be a default setting, really. But this fixed the problem for me.
Can you render a bar chart like this using flot?
Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?
Actually pretty easy to produce using flot.
var options = {
series: {
bars: {
show: true,
barWidth: 15778463000, // 1/2 year in milliseconds
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%y",
tickSize: [1, "year"],
autoscaleMargin: .10 // allow space left and right
}
};
$(function() {
$.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
[1262304000*1000, 200],
[1293840000*1000, 300]]], options);
});
Produces:
I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).
$.plot($("#placeholder"), [
{
label: 'Failed',
data: [[0,10]],
bars: { show: true }
},
{
label: 'Passed',
data: [[1,15]],
bars: { show: true }
},
{
label: 'Not Run',
data: [[2,30]],
bars: { show: true }
},
{
label: 'Blocked',
data: [[3,5]],
bars: { show: true }
},
{
label: 'In Progress',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.
Is this possible OOTB?
It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.
.tickLabel { font-size: 80% }
Here's an example directly from the API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}
http://flot.googlecode.com/svn/trunk/API.txt
The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(replace some_number with the desired size in points)
I used the following:
CSS File/SCSS File
#graph_label .tickLabel{
font-size: 50%;
}
Index.html or place where you are plotting the graph area
$.plot($("graph_label"), [dataArrayReference], options);
Ref: #BrentM 's Answer Above
PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work