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
};
Related
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 have this apexcharts definition and when i've got more than e.g. 300 datasamples for my series things are overlapping on the xAxis like this
i would rather see something like this though
The option "hideOverlapLabels" does not work since it only works with timeseries from what i've read.
I know i can reduce the ticks but i want the chart to be zoomable and have all data in it.
Is there a way how i can prevent the labels to overlap?
var options_apex = {
series: null,
colors: [ '#0054ff', '#FF0000' ,'#FF0000'],
chart: {
height: 450,
type: 'line',
zoom: {
enabled: true
},
animations: {
enabled: false
}
},
stroke: {
width: [3, 3, 3],
curve: 'straight'
},
labels: null,
title: {
text: "Serial Data",
align: 'center',
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
},
},
subtitle: {
text: "the reckoning",
align: 'center',
margin: 10,
offsetX: 0,
offsetY: 20,
floating: true,
style: {
fontSize: '12px',
fontWeight: 'normal',
fontFamily: undefined,
color: '#9699a2'
},
},
xaxis: {
type:"category",
labels: {
rotate: -90,
rotateAlways: true,
hideOverlappingLabels: true,
style: {
colors: [],
fontSize: '7px',
fontFamily: 'Roboto',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
}
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
tickAmount: undefined,
title: {
text: "STEP ID",
offsetX: 0,
offsetY: 0,
style: {
color: "#0000ff",
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-title',
},
}
},
};
i used: tickAmount:15 , and work for my , this show 15 values and hide anothers, also you can try applied formatt and if condicional, to xaxis with:
formatter: function (value) {
if(value && ((value.split(':')[1][1] === '0') || (value.split(':')[1][1] === '5'))){
return (value);
}else{
value='';
return('');
}
}
I think i found the solution
xaxis: {
type:"category",
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: 0,
fontFamily: 0,
},
},
labels: {
rotate: -45,
rotateAlways: true,
hideOverlappingLabels: true,
style: {
colors: [],
fontSize: '6px',
fontFamily: 'Roboto',
fontWeight: 80,
//cssClass: 'apexcharts-xaxis-label',
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
},
With this setup and setting not the Labels but Categories with
options_apex.xaxis.categories = labels;
things seem to work without overlapping.
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 am using the datalabels plugin, and the values overlap if they are too long:
I tried using the diaply auto under plugins datalabels, but it stills overlaps, any ideas what to do so that they dont overlap?
here are my options:
const getOptions = (yAxisDisplayLabel, data, previousOpts, isMobile) => ({
...previousOpts,
layout: {
padding: {
top: 20,
},
},
plugins: {
datalabels: {
font: {
size: isMobile ? 8 : 12,
},
offset: isMobile ? -15 : -20,
anchor: 'end',
formatter: (value, context) => data.datasets[context.datasetIndex].displayValue[context.dataIndex],
display: 'auto',
align: 'start',
},
},
scales: {
yAxes: [{
ticks: {
display: true,
fontColor: '#c8c8c8',
fontSize: isMobile ? 8 : 12,
fontFamily: 'Futura Book',
beginAtZero: true,
},
gridLines: {
drawBorder: false,
},
scaleLabel: {
display: true,
labelString: yAxisDisplayLabel,
},
}],
xAxes: [{
categoryPercentage: isMobile ? 0.8 : 0.7,
barPercentage: 1,
gridLines: {
display: false,
drawBorder: false,
},
}],
},
legend: {
display: false,
},
scaleBeginAtZero: true,
});
The simple, non-technical, answer is of course to write Unit: €/m2 somewhere else on the chart and not an every bar.
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