Is it anyway to disable interpolation in line chart using chartjs? I just red entire documentation and didnt find anything about this.
#UPDATE
lineTension: 0 is the thing I was looking for.
(Thanks #tektiv for the answer)
You need to edit the lineTension property (check the documentation), stored in the dataset :
datasets: [{
label: "My First dataset",
lineTension: 0,
data: [/* ... */],
// ...
}]
Setting it to 0 will prevent the interpolation from working.
You can see the result on this jsFiddle, and here is a screenshot :
Related
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and it's not what I need.
When someone asked the same question on Github, it looks as though there isn't currently an easy way to do this. plouc, the creator of nivo said the following:
short answer, you cannot :/ However you can use an extra layer to achieve the same result, using the layers property and adding an extra component.
The photo attached is from the Nivo documentation on adding a marker (clicking on the Story tab will show basic code).
Here is the source code for the markers item. If you search for width throughout the document, you can see that it's set in the x2 of the line. Scrolling down further, you can see there is a strokeWidth property, but from what I can tell it only controls the thickness of the line, not how wide it is.
Can someone please let me know what I missed?
Here is my code. I am displaying two markers on my bar chart so there are two marker objects passed in. I've removed unrelated Bar props for simplification.
<NivoBar
data={data}
keys={['floor', 'pattern', 'ceiling']}
markers={[
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: ceiling,
lineStyle: {stroke: 'red', strokeWidth: 2},
legend: `${ceiling}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange', fontWeight: 'bold'}
},
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: floor,
lineStyle: {stroke: 'red, strokeWidth: 2},
legend: `${floor}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange, fontWeight: 'bold'}
}
]}
/>
So I'm trying to configure chart.js so that there is always a slight bar shown even for the lowest value. I can see there is a "minBarLength" property which the docs says to "Set this to ensure that bars have a minimum length in pixels." but I can't seem to get this working?
Here's a sandbox using the latest version of chart.js and with the use of this property as shown here:
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
minBarLength: 4,
backgroundColor: "blue"
}
]
}
However, the lowest value is still not being displayed on the graph:
I should also note that I am aware of the "beginsAtZero" property but I don't wish to use this as this can make it difficult displaying charts that have large values.
Any help would be greatly appreciated!
Simply tell your yAxes to beginAtZero by extending the options as follows:
options: {
title: {
display: true,
text: "Custom Chart Title"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
you probably do not have this issue anymore, but if anyone reads this.
I am using "chart.js": "3.8.0". When you set the min of the y-Axis for example to 1 you have to set the attribute "base" of the dataset to 1 as well so that minBarLength can work.
Here is my jsfiddle explaining the issue I am facing. I want to basically pass the options object (to disable fill and bezier curves) like I could have done in the older versions...
https://jsfiddle.net/xjdvngwe/
Basically I want to achieve passing an options to the chart
function at the time of chart creation
var options = { fill:false,tension:0, lineTension :0.1};
var chart_testChart = new Chart.Line(ctx,
{
data: data,
options: options
});
And in the latest version 2.1.6, I cannot get this to work
If I pass them like this, they work fine but I am looking for a way to pass them as options object
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
It is because you misunderstood how the chart is built :
You supposed that fill and tension attributes were both directly in the root of the options, but they are actually in options.element.line.
For more information, check the Chart.js doc about element configuration (Scroll until Line Configuration in your case).
But be careful !! Don't mix up :
Editing one element (as you managed to do in the second part of your question) by editing the dataset you pass to the chart data :
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
// ...
}]
Editing all the elements of the same type (here, the line chart) by editing the chart options :
var options = { elements: { line: { /*options */ } } };
As stated in the documentation I gave above :
Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
So make sure you actually want to edit all the line charts before editing these attributes directly in the options.
Now if you still want to edit in the options, you will have to build your options var like this :
var options = { elements: { line: { fill: false, tension: 0.1 } } };
var chart_testChart = new Chart.Line(ctx,
{
data: data,
options: options
});
Here is a working fiddle if you want to see the result.
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'm trying to reproduce some of the Google Analitycs line charts styles with the Google Chart lib.
GA:
Google Line Chart:
There are 2 things that I'm struggling with reproducing:
I can't find a way to fill the area below the line with a background color
I did not find how to make the dots on the line to be always displayed (currently, I can display one of them when clicking on the line)
They are using an Area Chart, not a Line Chart. https://developers.google.com/chart/interactive/docs/gallery/areachart
For the points appearing on the line all the time, see Points documentation.
https://developers.google.com/chart/interactive/docs/points
Just off the top of my head, here's some other settings of note (details for all of these appear at the bottom of the AreaChart documentation page):
var options = {
legend: {
position: 'top',
alignment: 'start'
},
vAxis: {
textPosition: 'in'
},
focusTarget: 'category' // if multiple lines, data for all appear in tooltip
};