while filling the color between 2 line series the fill color overlaps the point.
https://codesandbox.io/s/react-chartjs-2-line-chart-example-forked-5ruj86
I having this issue in version 3.6.0.
Just add order property to the first dataset. Documentation
const data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
color: "#008484",
backgroundColor: "#A5E1D2",
pointBorderColor: "#007B5E",
pointBackgroundColor: "#ffffff",
borderColor: "#008484",
fill: 1,
borderWidth: 3,
pointRadius: 5,
pointHoverRadius: 5,
pointBorderRadius: 5,
order: 1
},
{
data: [800000, 700000, 600000, 550000, 500000, 450000, 400000],
color: "#002E2E",
backgroundColor: "#A5E1D2",
pointBorderColor: "#002E2E",
pointBackgroundColor: "#ffffff",
borderColor: "#002E2E",
fill: 1,
borderWidth: 3,
pointRadius: 5,
pointHoverRadius: 5,
pointBorderRadius: 5
}
]
};
Checkout the codesandbox
I am having issue in representing two datasets on my chartjs chart when both of my data is from a stored variable. When both of my data {inbound & outbound} is from a stored(and unique) variable, It shows two line graph but having similar data with the inbound data list inheriting the outbound data list. The inbound and outbound data list are two separate data and should be shown as two unique datasets on the chart.
My code is this
var inbound = InboundSmsCountList;
var outbound = OutboundSmsCountList;
var ff = MonthDaysList;
var combined_arraysx = [InboundSmsCountList,OutboundSmsCountList];
var max2 = combined_arraysx.reduce(function(final, current) {
for (var i = 0; i < final.length; ++i) {
if (current[i] > final[i]) {
final[i] = current[i];
}
}
return final;
});
var maxValue = Math.max.apply(Math, max2);
console.log(maxValue);
var ctx6 = document.getElementById('chartBar6').getContext('2d');
var gradient1x = ctx6.createLinearGradient(0, 350, 0, 0);
gradient1x.addColorStop(0, 'rgba(241, 0, 117,0)');
gradient1x.addColorStop(1, 'rgba(241, 0, 567,.5)');
var gradient2x = ctx6.createLinearGradient(0, 280, 0, 0);
gradient2x.addColorStop(0, 'rgba(86, 87, 255,0)');
gradient2x.addColorStop(1, 'rgba(34, 45, 255,.5)');
var config = {
type: 'line',
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,//[1, 2, 0, 0, 84, 0, 10, 16, 8, 0, 0, 0, 4, 4, 1, 0, 0, 0, 1, 5, 0, 1, 0, 0, 0, 0, 71, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: inbound,//[0, 0, 0, 0, 5, 0, 0, 0, 6, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: true,
position:"top",
labels: {
display: true
}
},
scales: {
xAxes: [{
//stacked: true,
barPercentage: 0.5,
ticks: {
beginAtZero:true,
fontSize: 11
},
gridLines: {
display: false,
drawBorder: true
},
}],
yAxes: [{
//stacked: true,
ticks: {
fontSize: 10,
color: '#97a3b9',
min: 0,
max: maxValue
},
gridLines: {
display: false,
drawBorder: true
},
}]
}
}
};
new Chart(ctx6, config );
when both data is from stored variable - see image
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: inbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
}
when outbound data is a stored variable while the inbound data is raw list/array it shows correct graph-two separate datasets - see image
data: {
labels: ff,//['May-01', 'May-02', 'May-03', 'May-04', 'May-05', 'May-06', 'May-07', 'May-08', 'May-09', 'May-10', 'May-11', 'May-12', 'May-13', 'May-14', 'May-15', 'May-16', 'May-17', 'May-18', 'May-19', 'May-20', 'May-21', 'May-22', 'May-23', 'May-24', 'May-25', 'May-26', 'May-27', 'May-28', 'May-29', 'May-30', 'May-31'],
datasets: [{
label: 'Outbound',
data: outbound,
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient2x,
},{
label: 'Inbound',
data: [0, 0, 0, 0, 5, 0, 0, 0, 6, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0],
borderColor: '#00cccc',
borderWidth: 1,
backgroundColor: gradient1x,
}]
}
Can someone advise how to fix this?
Thank you.
I have a chart as shown below. I have two expectation, firstly as you can see the tick number (1,2,3,4,5) hidden behind the background color of dump datasets (I need that background colors, that's why I am using fake datasets). I need to show them like using z-index or something. I wrote tick numbers in red color for sample.
Secondly I need the show angle line on top also.
var test2 = [2, 2, 2, 2, 2];
var test3 = [3, 3, 3, 3, 3];
var test4 = [4, 4, 4, 4, 4];
var test5 = [5, 5, 5, 5, 5];
new Chart(document.getElementById("myChart"), {
type: 'radar',
data: {
labels: sectionDescriptions,
datasets: [
{
label: "2050",
fill: true,
borderColor: "rgba(0,0,0,1)",
borderWidth: "4",
pointRadius: 3,
pointBorderWidth: 3,
pointBackgroundColor: "cornflowerblue",
pointBorderColor: "rgba(0,0,200,0.6)",
pointHoverRadius: 10,
data: sectionPoints
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(240,0,0,1)",
data: test2
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(255,190,4,1)",
data: test3
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(255,250,5,1)",
data: test4
},
{
radius: 0,
fill: true,
backgroundColor: "rgba(0,180,233,1)",
data: test5
}
]
},
options: {
title: {
display: true,
text: 'Chart'
},
scale: {
gridLine: {
color : "white"
},
ticks: {
beginAtZero: true,
min: 0,
max: 5,
stepSize: 1,
fontColor: 'black',
backDropColor: 'black'
},
pointLabels: {
fontSize: 13,
//fontStyle: 'bold'
}
},
legend: {
display: false
}
}
});
I'm using Google Charts to build a Line Graph and I need to change the style of the selected point.
The code below customizes the points individually when the graph loads, but I need to style the point after the user selects/clicks the point. I need to change the color, size and stroke-width of the selected point.
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X', 'Y', {'type': 'string', 'role': 'style'}],
[1, 3, null],
[2, 2.5, null],
[3, 3, null],
[4, 4, null],
[5, 4, null],
[6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; visible: false }'],
[7, 2.5, null],
[8, 3, null]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 7,
dataOpacity: 0.3
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
https://jsfiddle.net/api/post/library/pure/
I search for a solution, to only show every second value on the hAxis label of an Google LineChart.
The hAxis label interval is set by the hAxis.showTextEvery option as described here. This only works for discrete (non-number) horizontal axes. For example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {showTextEvery: 2}}
);
}
If your axis is numerical, you can set this using the hAxis.minorGridlines.count option, as follows:
hAxis: {minorGridlines: {count: 1}}
This will add a single gridline (with no label) in between every two major gridlines.