I have a chart.js on a page and am struggling to set the min and max values on the Y axis, these are the options set:
var areaChartOptions = {
showScale : true,
scaleShowGridLines : false,
scaleGridLineColor : 'rgba(0,0,0,.05)',
scaleGridLineWidth : 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines : true,
bezierCurve : true,
bezierCurveTension : 0.3,
pointDot : false,
pointDotRadius : 4,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 20,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
legendTemplate : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
//Boolean - to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio : true,
responsive : true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMin: 0,
suggestedMax: 100
}
}]
}
}
But it is neither beginning at zero nor is it respecting the suggestedMin or suggestedMax
the yAxes seems to be set here :
datasets: [
{
yAxisID : 'yAxes',
label : 'Listeners',
fillColor : 'rgba(0, 166, 90,1)',
strokeColor : 'rgba(0, 166, 90,1)',
pointColor : 'rgba(0, 166, 90,1)',
pointStrokeColor : '#00a65a',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(0, 166, 90,1)',
data :
What I would like to do is to force the charts Y axis to have the values that I set myself (in this example 0 as the minimum and 100 as the maximum).
Thanks in advance.
I suppose you're using Chart.js version 3.
According to the 3.x Migration Guide, the following relevant changes have been made since v2.
scales.[x/y]Axes.ticks.beginAtZero was renamed to scales[id].beginAtZero
scales.[x/y]Axes.ticks.max was renamed to scales[id].max
scales.[x/y]Axes.ticks.min was renamed to scales[id].min
scales.[x/y]Axes.ticks.suggestedMax was renamed to scales[id].suggestedMax
scales.[x/y]Axes.ticks.suggestedMin was renamed to scales[id].suggestedMin
Therefore, instead of...
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 100
}
}
}
...you now have to define:
scales: {
y: {
beginAtZero: true,
suggestedMax: 100
}
}
Related
I want the x-axis of the my chart to be at the top.
I will attach the source code.
Please help me.
current chart :
what I want :
borderSkipped: false,
indexAxis: 'y',
// aspectRatio: 4,
scales: {
y: {
beginAtZero: true
// suggestedMax: 24,
},
x: {
suggestedMax: 24,
ticks: {
stepSize: 1
}
}
}
},
try adding to scales.x.position : ‘top’
I am migrating chart.js to 3.x as per the migration guide.
https://www.chartjs.org/docs/master/getting-started/v3-migration/
I am trying to set the xAxis zeroLineColor to "#FFFFFF" and I want to have the Grid line color as "#00FFFF" but as per the chart.js migration document document scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead.
I am not sure how to use scriptable scale options for setting the xAxis line zero to white.
Update:
Working example:
https://jsfiddle.net/g4vq7o2b/2/
In order to obtain different colors for the grid's zero line, you could define an array of colors for the option gridLines.color.
gridLines: {
drawBorder: false,
color: ["#FFFFFF", "#00FFFF", "#00FFFF", "#00FFFF", "#00FFFF"]
}
Since gridLines.color is a scriptable options, it also accepts a function which is invoked with a context argument for each of the underlying data values as follows:
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
Please take a look at below runnable code and see how it works.
new Chart(document.getElementById("myChart"), {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [2, 3, 1, 4, 2, 4, 2],
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.3)",
borderColor: "rgb(0, 255, 0)"
}]
},
options: {
scales: {
y: {
min: 0,
ticks: {
stepSize: 1
},
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
},
x: {
gridLines: {
drawBorder: false,
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
Using chart_v3.7.0.js cartesian time axis, for me, configuring zeroline and other gridlines works, using scriptable options.
Apply property for "context.tick.value == 0" (=baseline)
like:
...
options: {
scales: {
x: {
gridLines: {
color: "#00ff00",
},
ticks: { font: { size: 30 },
maxRotation: 90,
minRotation: 90,
},
type: 'time',
time: {
/*tooltipFormat: "DD.MM hh:mm",*/
displayFormats: {
minute: 'HH:mm',
hour: 'HH:mm',
day: 'dd.MMM',
}
},
},
y: {
grid: {
color: (line) => (line.index === 0 ? 'red' : 'rgba(0, 0, 0, 0.1)') //color of lowest horizontal grid line
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF", // zero-line baseline color
lineWidth: context => context.tick.value == 0 ? 3 : 1, // zero-line baseline width
},
position: 'right', // show axis on the right
title: { display: true,
rotation: 0,
text: "°C", },
},
},
I am using Chart.js for generating BarChart. How can I align labels, so that rotation is 90 and all labels are aligned to start of each label. Currently, all labels are aligned to end of each label.
I am trying to display all labels to start at same vertical position - where 'A' of Avengers is. Currently all labels are ending at same vertical position - where 'r' of War is.
I need text turned towards right (not left) and coming from bottom to top (not top to bottom)
public barChartOptions: ChartOptions = {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
// maxRotation: 90,
minRotation: 90,
labelOffset: 0,
padding:-140
},
}]
},
};
Stackblitz link: https://ng2-charts-bar-template-tdpncj.stackblitz.io
Stackblitz code link: https://stackblitz.com/edit/ng2-charts-bar-template-tdpncj
You can put it like this:
xAxes: [{
ticks: {
minRotation: -90,
labelOffset: 0,
padding: -30
},
}]
Only problem is the text will be facing to the left
you can align labels like this but issue might be you pacing with text lenght size issue of handle that then it work for you , Sey minRotation: 360 so that rotation is 90 and all labels are aligned to start of each label
if you think text size you cannot make it short then i suggest you go with minRotation: 0 so it showing you proper text that every buddy like
export class AppComponent {
public barChartOptions: ChartOptions = {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
minRotation: 360,
labelOffset: 0,
padding: -30
},
}]
},
};
public barChartLabels: Label[] = ['A', 'Br', 'In', 'Aq', 'V', 'Mis'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40] }
];
constructor() { }
ngOnInit() {
}
}
Also check here updated code
https://stackblitz.com/edit/ng2-charts-bar-template-42mpft?file=src/app/app.component.ts
Using Chart.js, I have made a scatter plot. The points on the chart will always be on an axis. Currently, I am using the following options and data:
public scatterChartLabels:string[] = ['Experiencing', 'Ideation', 'Thinking', 'Evaluation'];
public scatterChartData = [
{
x: 0,
y: localStorage.getItem('col1')
}, {
x: localStorage.getItem('col2'),
y: 0
}, {
x: 0,
y: - localStorage.getItem('col3')
},
{
x: - localStorage.getItem('col4'),
y: 0
},
{
x: 0,
y: localStorage.getItem('col1')
}
]
public scatterChartOptions = {
showLines: true,
yAxes: {
gridLines: {
zeroLineWidth: 100
}
},
scales: {
xAxes: [{
gridLines: {
zeroLineColor: '#c1272d'
},
}],
yAxes: [{
gridLines: {
zeroLineColor: '#c1272d'
}
}],
}
}
public scatterChartType: string = 'scatter';
public scatterChartCustomColors = [{
backgroundColor: 'rgba(255, 147, 29, 0.5)',
borderColor: 'rgba(255, 147, 29)',
pointBackgroundColor: 'rgba(255, 147, 29, 0.5)',
pointBorderColor: 'rgba(255, 255, 255)'
}]
This produces the following chart:
How can I make the chart use the same scale on both axes? For example, If the highest y-axis value is 130, how can I make the lowest y-axis tick 130, and the x-axis ticks -130 and 130?
I was able to do this by updating the tick settings for each axis:
public scatterChartOptions = {
...
scales: {
xAxes: [{
ticks: {
min : - 130,
max : 130
}
}],
yAxes: [{
ticks: {
min : - 130,
max : 130
}
}]
}
}
I'm using ChartJS to create a line chart with elements. I'm wondering if it possible to set borders on left and right of a element? This is my chart and it gets confusing if you have two elements next to each other and they have the same color.
I've found nothing in the docs that supports it, so I figure that I have to draw it myself using js but I was hoping someone had an solution first :)
In case I have to draw it myself I would run into a problem since every element can have different widths due to the time axis (X). What would be your idea to solve that?
Update
Every element in the chart is a new dataset and gets a gradient object as backgroundColor and fill sets as true. Here is an example of me pushing a new dataset into the chart
chart.data.datasets.push({
fill: true,
backgroundColor: gradient,
data: [
{
x: aIstartX,
y: yAxis_value,
.. Other attributes
},
{
x: newEntryXend,
y: yAxis_value,
..Other attributes
}]
});
xAxes: [
{
stacked: false,
type: 'time',
unit: 'minute',
position: 'bottom',
scaleLabel: {
display: true
},
time: {
displayFormats: {
'minute': 'mm:ss'
}
},
ticks: {
autoSkip: true,
beginAtZero: true,
stepSize: 2,
autoSkipPadding: 5,
padding: 10,
labelOffset: 5,
},
gridLines: {
display: false,
tickMarkLength: 20
},
}
]
Here is a fiddle of my issue
https://jsfiddle.net/fa8hvhtv/1/
Any reason why you can wanted to keep the same background colors for ,
Why cant you try as below
Demo
fill: true,
backgroundColor: 'red',
I've found a solution to my problem. The issue was that I was trying to create some space between my datasets and my datas attribute Y doesnt start and end at 0. Therefor I added two extra datapoints in each dataset with a borderWidth of 3 and borderColor that matches the backgroundColor of the chart. Each extra added datapoint will have a Y with the value of 0. An example of adding a dataset to my chart is below.
chart.data.datasets.push({
fill: true,
backgroundColor: gradient,
borderWidth: 3,
borderColor: '#333',
data: [
{
x: startXvalue,
y: 0
},
{
x: startXvalue,
y: startY,
.. Other attributes
},
{
x: newEntryXend,
y: endY,
.. Other attributes
},
{
x: newEntryXend,
y : 0
}]
});