I am creating a chart using chart.js. I would like to remove the gridlines, but I want to keep the little pieces(drawTicks: true), marked yellow in the image below.
Is this be possible?
I have tried:
gridLines: {
display: false,
drawTicks: true
}
But that is hiding all of the gridlines.
Yes you can,
to hide the gridlines without removing the little ticks you can do this :
gridLines: {
drawOnChartArea: false
}
Related
I am implementing chartjs, when the number of col too large. It will display like this:
My question is: Is there any way to keep the label always across?
For example:
Thanks!
You can specify maxRotation (and minRotation) in the tick configuration. Be aware that Chart.js may omit labels to ensure the text does not overlap.
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 0
}
}]
}
}
Currently my graph looks something like this
chartjs graph with x-axis labels
Looking to remove the X axis data labels yet show the time value on hover (on a data point)
Thank you!
Using Chart.js version 2. Try ticks display false in the options section
//...
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
//...
Example: https://jsfiddle.net/7o3m81zt/
I have a line chart rendered with Chart.js and I display the X axis at the bottom:
xAxes: [{ type: 'linear',
position: 'bottom',
I would like to have two X axis, one at the bottom and one at the top.
I see in the documentation that position is a string, thus one value only.
Is it possible to accomplish this?
This is an old question, but I just had the same problem. Luckily the value of xAxes is an array, so you define multiple axes like this:
xAxes: [
{ position: 'top' },
{ position: 'bottom', ... other definitions here ... }
]
I'm working with Chart.js and creating line charts. I can't seem to get rid of the line above every chart coordinate. See the picture below. Which setting do I need to change to get rid of them? Thanks.
Click me
Here is what the chart variable looks like
var chart = new Chart(chartx, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
fill: false,
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
lineTension: 0,
pointStyle: 'dash'
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: false,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
legend: {
display: false,
}
},
});
This is because you put pointStyle: 'dash' in your dataset attributes.
See Chart.js doc about LineChart data structure (pointStyle is at the last row of the table) :
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
You have to choose between the different options.
Note that there is no none option.
If you want to remove the point style, you can :
Set the pointRadius attribute of your dataset to 0 (like in this fiddle).
Import an image as stated in the second part of the blockquote, which is empty (like this one).
I am generating this Google Line Chart using the Google JS API. As you can see, the labels are very narrow. How do I make it so that the whole label text is visible?
Here are some samples based on the google code playground line charts. Adjusting the chartArea width option gives more space for labels:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
chartArea: {width: '50%'}}
);
If it's an option, you could also position the labels beneath the chart, which gives considerably more space:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
legend: 'bottom'}
);
Expanding the chartArea option to a width of 100% solved the problem for me. Contrary to the documentation, the chartArea does include the legend. I used a PieChart but the same option is available for the LineChart.
var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);
Reference.
None of the previous answers worked well for me. Setting width to less than 100% centers the plot area and leaves too much unused space on the left. Setting it to 100% is not a solution either.
What worked well - see live working fiddle - is setting the right value to accommodate the legend, then adjusting the left value eventually, for the Y axis title and labels. The plot area width will adjust automatically between these two fixed margins:
var options = {
...
legend: { position: 'right' },
chartArea: {
right: 130, // set this to adjust the legend width
left: 60, // set this eventually, to adjust the left margin
},
...
};
There is an option in legend.textStyle we can customize legend text styles inside google charts
var options = {
legend: { textStyle: { fontSize: 78 //size of the legend
} }
}
You need to make the chart wider or your labels shorter.