Line Graph line not smooth / Updating max tick limit #5297
Labels
Comments
|
@henhen87 do you have a fiddle that shows this issue? |
|
I do not have a JS Fiddle set up at the moment, but I am using React with
the regular Chart JS and not the React Extension. I have uploaded an image
of what my graph looks like at the moment. The x-axis represents the
months. Currently I am displaying an array of size 360 for months and my
maxTicksLimit is 30, since I want the x-axis labels to be displayed as
years and not months. So there are 360 plot points but I am converting the
x-axis ticks to show 1-30 for years. My y-axis represents dollar amounts.
As you can see, the max value can get quite high (over 1 million).
My 2 main problems are: The lines are not showing, and I cannot update
maxTicksLimit.
1) //Chart JS configuration
componentDidMount () {
let maxSize = 0;
// console.log('SIZEEEE', size);
let ctx = document.getElementById("myChart-" + this.props.keys);
this.linegraph = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: this.props.info.values.buy,
borderWidth: 4,
borderColor: "#1FA7B9",
fill: false,
lineTension: 0,
// cubicInterpolationMode: 'default',
radius: 0
// backgroundColor: "#00C7B1"
},
{
data: this.props.info.values.rent,
borderWidth: 4,
borderColor: "#00C7B1",
fill: false,
lineTension: 0,
// cubicInterpolationMode: 'default',
radius: 0,
// backgroundColor: "#1FA7B9"
}
],
// labels: this.props.xLabels
},
options: {
elements: {
line: {
tension: 0
},
point: {
radius: 0
}
},
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Average Total Net Costs/Month'
},
gridLines: {
// display: false
// color: 'red',
drawBorder: false,
tickMarkLength: 15
// zeroLineColor: 'grey'
},
ticks: {
suggestedMin: 0,
suggestedMax: maxSize,
callback: function (value, index, labels) {
return Number(value) / 1000 + 'K';
}
}
}
],
xAxes: [
{
type: 'category',
scaleLabel: {
display: true,
labelString: 'Years at Residence'
},
gridLines: {
// display: false
drawBorder: false,
tickMarkLength: 20
},
labels: this.state.labels,
ticks: {
// suggestedMin: 0,
// suggestedMax: 10,
// autoSkip: false,
maxTicksLimit: 30,
stepSize: 0,
// stepSize: 24
callback: function (value, index, labels) {
// if (index === labels.length - 1) {
// return value + 1;
// }
// return value % 5 === 0 ? value : null;
return Math.floor(value + 1);
}
},
}
],
},
legend: {
display: false
},
layout: {
padding: {
left: 15,
right: 15,
top: 20,
bottom: 40
}
},
responsive: true,
maintainAspectRatio: false,
// cutoutPercentage: 83
}
});
}
…On Fri, Feb 23, 2018 at 3:30 PM, Evert Timberg ***@***.***> wrote:
@henhen87 <https://github.com/henhen87> do you have a fiddle that shows
this issue?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#5297 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ATL4aT0ZCc9rk454mS6ihbzMVjg8kzz9ks5tX0ougaJpZM4SRY8w>
.
|
|
do not have a JS Fiddle set up at the moment, but I am using React with
the regular Chart JS and not the React Extension. I have uploaded an image
of what my graph looks like at the moment. The x-axis represents the
months. Currently I am displaying an array of size 360 for months and my
maxTicksLimit is 30, since I want the x-axis labels to be displayed as
years and not months. So there are 360 plot points but I am converting the
x-axis ticks to show 1-30 for years. My y-axis represents dollar amounts.
As you can see, the max value can get quite high (over 1 million).
My 2 main problems are: The lines are not showing, and I cannot update
maxTicksLimit.
1) //Chart JS configuration
componentDidMount () {
let maxSize = 0;
// console.log('SIZEEEE', size);
let ctx = document.getElementById("myChart-" + this.props.keys);
this.linegraph = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: this.props.info.values.buy,
borderWidth: 4,
borderColor: "#1FA7B9",
fill: false,
lineTension: 0,
// cubicInterpolationMode: 'default',
radius: 0
// backgroundColor: "#00C7B1"
},
{
data: this.props.info.values.rent,
borderWidth: 4,
borderColor: "#00C7B1",
fill: false,
lineTension: 0,
// cubicInterpolationMode: 'default',
radius: 0,
// backgroundColor: "#1FA7B9"
}
],
// labels: this.props.xLabels
},
options: {
elements: {
line: {
tension: 0
},
point: {
radius: 0
}
},
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Average Total Net Costs/Month'
},
gridLines: {
// display: false
// color: 'red',
drawBorder: false,
tickMarkLength: 15
// zeroLineColor: 'grey'
},
ticks: {
suggestedMin: 0,
suggestedMax: maxSize,
callback: function (value, index, labels) {
return Number(value) / 1000 + 'K';
}
}
}
],
xAxes: [
{
type: 'category',
scaleLabel: {
display: true,
labelString: 'Years at Residence'
},
gridLines: {
// display: false
drawBorder: false,
tickMarkLength: 20
},
labels: this.state.labels,
ticks: {
// suggestedMin: 0,
// suggestedMax: 10,
// autoSkip: false,
maxTicksLimit: 30,
stepSize: 0,
// stepSize: 24
callback: function (value, index, labels) {
// if (index === labels.length - 1) {
// return value + 1;
// }
// return value % 5 === 0 ? value : null;
return Math.floor(value + 1);
}
},
}
],
},
legend: {
display: false
},
layout: {
padding: {
left: 15,
right: 15,
top: 20,
bottom: 40
}
},
responsive: true,
maintainAspectRatio: false,
// cutoutPercentage: 83
}
});
}
2) //Updating graph configuartion
componentWillReceiveProps (nextProps) {
let labels = []
for (let i = 0; i < this.props.loantype * 12; i++) {
labels.push(Math.floor(i / 12) + 1);
}
this.linegraph.options.scales.xAxes[0].ticks.suggestedMax =
nextProps.loantype;
this.linegraph.options.scales.xAxes[0].ticks.maxTicksLimit =
nextProps.loantype;
this.linegraph.update();
this.setState({ labels }, () => {
this.linegraph.update();
})
}
…On Fri, Feb 23, 2018 at 3:30 PM, Evert Timberg ***@***.***> wrote:
@henhen87 <https://github.com/henhen87> do you have a fiddle that shows
this issue?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#5297 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ATL4aT0ZCc9rk454mS6ihbzMVjg8kzz9ks5tX0ougaJpZM4SRY8w>
.
|
|
This is a test case: https://jsfiddle.net/nagix/s2e4ahck/ |
|
Regarding the second question, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
this.linegraph = new Chart(ctx, { type: 'line', data: { datasets: [ { data: this.props.info.values.buy, borderWidth: 2.5, borderColor: "#1FA7B9", fill: false, lineTension: 0, // cubicInterpolationMode: 'default', radius: 0 // backgroundColor: "#00C7B1" }, { data: this.props.info.values.rent, borderWidth: 2.5, borderColor: "#00C7B1", fill: false, lineTension: 0, // cubicInterpolationMode: 'default', radius: 0, // backgroundColor: "#1FA7B9" } ], // labels: this.props.xLabels }, options: { elements: { line: { tension: 0 }, point: { radius: 0 } }, scales: { yAxes: [ { scaleLabel: { display: true, labelString: 'Average Total Net Costs/Month' }, gridLines: { // display: false // color: 'red', drawBorder: false, // zeroLineColor: 'grey' }, ticks: { suggestedMin: 0, suggestedMax: maxSize, callback: function (value, index, labels) { return Number(value) / 1000 + 'K'; } } } ], xAxes: [ { type: 'category', scaleLabel: { display: true, labelString: 'Years at Residence' }, gridLines: { // display: false drawBorder: false, // tickMarkLength: 20 }, labels: this.state.labels, ticks: { suggestedMin: 0, suggestedMax: 360, // autoSkip: true, maxTicksLimit: 30, stepSize: 0, // stepSize: 24 callback: function (value, index, labels) { return Math.floor(index / 12) + 1; } }, } ], }, legend: { display: false }, layout: { padding: { left: 15, right: 15, top: 20, bottom: 40 } }, responsive: true, maintainAspectRatio: false, // cutoutPercentage: 83 } });this.linegraph.options.scales.xAxes[0].ticks.suggestedMax = nextProps.loantype * 12; this.linegraph.options.scales.xAxes[0].ticks.maxTicksLimit = nextProps.loantype; this.linegraph.update();When I log out these two values, it shows it has been updated, but my graph still has the same amount of ticks from the first settings and did not update.
The text was updated successfully, but these errors were encountered: