Im working on making a nice chart in vuejs with chartjs. I have a scatter chart here and chartjs seems to want to pad the x axis with unused values when I use large numbers like a unix timestamp.
Here is what it looks like with lables on so you can see what is happening:
I added the prop ...
xAxes: [
{
display: true,
ticks: {
padding: 0,
}
...assuming that was the solution but it has no affect.
Thank you!
Codepen of behavior
Got it!
Since all of my x values are multiples of 3600 (one hour in seconds) I was able to set the x axis stepSize to 3600 to make sure it begins and ends on a step.
scales: {
xAxes: [
{
ticks: {
stepSize: 3600
}
}
],
}
Related
I am using Chart.js and would like to manage my Y-axis. It should look like this:
Intervals should be 15 steps and it should always show the maximum value - 45 (even the data from X-axis is less).
I am trying this:
options: {
scales: {
yAxes: [{
display: true,
ticks: {
maxTicksLimit: 45,
stepSize: 15,
}
}]
},
}
It doesn't work for me: the interval is not 15, but 2, and the maximum Y-axis value depends on X-axis data - if data is 30, then maximum Y-axis value is 30.
How could I fix that? Thank you!
If you open up your browser's dev tools, in the console it's likely you would see this error:
Invalid scale configuration for scale: yAxes
At least that's what I see when trying to use your options object. This tells us that we've not written the scales property correctly. Looking at the chart.js documentation, we see that scales is always an object, not an array of objects. Also based on your requirements it sounds like you would want to set max instead of maxTicksLimit which means you should write an options object like this:
options: {
scales: {
yAxes: {
display: true,
max: 45,
ticks: {
stepSize: 15
}
}
}
}
render chart view
how the chart looks
So I feel like I've tried everything under the sun to remove that red rectangle above the chart. Anyone know how to remove it? Most of the examples with setting up options and legend like below might work with chartjs but not vue-chartjs if I'm not mistaken.
options: {
legend: {
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
You litterly posted the answer yourself, the second object in the renderChart function is the options object so if you put it like this it will work:
{ responsive: true, maintainAspectRatio: true, legend: { display: false } }
Next time please dont post a screenshot of your code but include it as text in your post since it is a lot easyer to read and use for people
I am using Sencha Touch charts 1.0.0. From the docs, there is only type='Numeric', no 'percentage' type.
How can I add percentages to left axis? I tried giving the data as percentages ('20%', .. etc) but it didnt work.
in your axis just add this,
{
type: 'Numeric',
fields: ['Data'],
position: 'left',
label: {
renderer: function(v) {
return ((v * 100).toFixed(0)).concat('%');
}
}
}
I am trying to draw an pie chart using ExtJS but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing height attribute.
Code for my pie chart is as follows :
xtype: 'chart',
title: 'Location wise candidate distribution',
itemId: 'CandidateDistributionChart',
store: 'CandidateDistribution',
width: 250,
height: 260,
shadow: true,
animate: true,
theme: 'Base:gradients',
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'candidateCount',
showInLegend: true,
label: {
field: 'name',
contrast: true,
font: '18px Arial'
}
}]
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...
You used a string to define the store, but it needs a store object.
2 solutions :
1) store: Ext.getCmp('CandidateDistribution'),
Or 2) Define the store into a variable this way chartStore = Ext.create('Ext.data.Store', { ... }); and then pass it to the chart config : store: chartStore
But maybe it's not the problem according to the errors... Can you post the code of your store, your model, and the container of your chart ?
Make sure the value at least one value is not null or not zero. If all zeros or null you will have this type of error.
this is the model. I added the return and it worked. is a quick fix
{name: 'HD', type: 'number', convert: function(value,record){
if (value == 0)
return 0.0001 // The graphic needs at least one of the values to be more than 0 or will throw an error.
else
return value;
}
},
Is there any way to shorten the axis labels in sencha touch chart. As my axis labels are very long.Is it possible to show axis labels in two rows.
Please help me regarding this,
I am not sure if it is possible to show the label in two rows, but you can format the label using following code:
label : {
renderer : function(val) {
return val;
}
}
May be you want to truncate the label length to 3 characters, and have a legend to display the full forms of abbreviations.
I tried with below code and it working fine for me.
label: {
renderer: function(val) {
if (val.length > 10) {
return val.substring(0, 10) + "...";
}
}
}