Problem is that when I set my x-axis labels vertical they gets truncated, tried to set more height -> then chart changes size but labels are still truncated.
Is there a way/hack to set x-axis labels to not truncate on overflow.
Also there is strange behavior some of x-axis labels has some padding
-> I put red line below x-axis labels and there u can see that labels has different start positions
Thanks.
ColumnChart properties:
var options = {
title: 'title',
strictFirstColumnType: true,
lineWidth: 1,
isStacked: true,
legend: { position: 'bottom', alignment: 'left', textStyle: { color: 'black', fontSize: 15, italic: false, bold: true }, maxLines: 5 },
vAxes: { 1: { title: 'y1TitleText'e, titleTextStyle: { italic: false, bold: true }, minValue:0, gridlines: { count: 6 } } },
hAxis: {slantedText: true, slantedTextAngle: 90, title: 'titleText'},
fontSize: 15,
colors: colors
};
Diagram output :
Output image
Related
I want to make area chart with smooth line. and I have tried curveType : "function" and intervals : { "style" : "area", "color" : "#D49464" } but both are not working in my case here is my code -
var options = {
chartArea: { top: -10, height: '90%', width: '90%' },
height: 40,
width: 100,
legend: 'none',
curveType: 'function',
intervals: { 'style': 'area', 'color': '#D49464' },
hAxis: {
textPosition: 'none',
minValue: 0,
},
vAxis: {
minValue: 0,
textPosition: 'none',
gridlines: { count: 0 },
baselineColor: '#FFF',
},
areaOpacity: 0.1,
isStacked: true
};
I have the following code to make a chart with chart.js but the main and axis title just does not work. Also I have put the legend to the bottom but does not work. Can anybody tell why it is not working?
let dataSize = 30;
let readings = new Array(dataSize);
const data = {
// X axis labels
labels: new Array(dataSize),
datasets: [{
//label: 'My Input', // chart label
data: readings, // the data to chart
//borderColor: '#272323', // line color (lavender)
backgroundColor: 'rgba(123, 83, 252, 80)',
borderColor: "rgba(255, 0, 0,1)",
borderWidth: 1.2,
pointBorderColor: "rgba(255, 0, 0, 1)",
pointRadius: 0.2 // point size
}]
};
const config = {
type: 'line', // type of chart
data: data, // the data
options: {
animation: false, // remove animation to speed drawing up
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Tarrif'
},
legend:{
position: 'bottom'
},
scales: { // axis ranges:
y: {
//type: 'linear',
scaleLabel: {
display: true,
labelString: 'X axis Title'
},
min: 0,
max: 260,
gridLines: {
display: true,
drawBorder: false //hide the chart edge line
}
},
x:[{
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'X axis Title'
},
min:0
}]
}
}
};
Below is screenshot of my graph:
I followed the advice here:
In Chart.js set chart title, name of x axis and y axis?
thanks
First of all don't use an array for your X scales, all the scales need to be defined as objects. Second you are placing the options in the wrong part, it has to be configured in the title namespace like so:
scales: {
y: {
title: {
display: true,
text: 'yTitle'
}
},
x: {
title: {
display: true,
text: 'xTitle'
}
}
}
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'm use column google-chart with annotations. For annotation set option alwaysOutside: true. But I have one problem.
My annotation label automaticly shifting down for column with max value.
How I can fix this behavior?
My chart options here:
const chartOptions = {
legend: 'none',
width: 750,
height: 285,
bar: { groupWidth: '95%' },
fontName: 'Open Sans',
fontSize: 14,
enableInteractivity: false,
colors: ['#FF2D55', '#4772D1'],
vAxis: {
format: '0',
baseline: 0,
viewWindowMode: 'pretty',
viewWindow: {
min: 0
}
},
annotations: {
alwaysOutside: true,
style: 'point',
stem: {
length: 5,
color: '#FFFFFF'
},
textStyle: {
fontName: 'Open Sans',
fontSize: 16,
bold: true,
color: 'black',
opacity: 1
}
},
tooltip: {
trigger: 'none'
}
};
I found the solution by myself. Maybe someone needs.
After I got the data for my chart, I found max value in series and set option vAxis.minValue dynamically.
Code example:
const maxValue = this.getMaxValueInSeries(chartSeries);
this.chartOptions.vAxis.minValue = maxValue + 1;
It's work for me. Enjoy.
I'd like to have each label show. It's also not using the full width of the window, which is weird. Any idea how to fix these? Here's the option code:
var options = {
'title':'Experience Points',
'width':'927',
'height':'510',
'chartArea': {'left': '50','width':'927' },
legend: { position: 'top', maxLines: 2 },
hAxis: {showTextEvery: 0},
hAxis: {slantedText:'true'},
hAxis: {slantedTextAngle: '90'},
isStacked: true
};
Here's what it looks like: