Edit: This appears to only be an issue if you are using typescript. Thank you #LeeLenalee
I recently upgraded package versions
chart.js -- 3.2.1 -> 3.7.0
react-chartjs-2 -- 3.0.3 -> 4.0.1
Which broke my line chart:
<Line
data: {...}
options: {
pointRadius: 0,
pointHoverRadius: 5,
pointHitRadius: 20,
pointBackgroundColor: ...,
}
/>
The docs are fairly difficult to find this info. Even after I figured out how to change it and I look back at the docs I still can't make much sense of them.
Edit: Typescript error
It seems there is multiple ways to set the point options. For me I was able to set the global point options in options.elements.point.
<Line
data: {...}
options: {
elements: {
point: {
radius: 0,
hoverRadius: 5,
hitRadius: 20,
backgroundColor: ...,
}
}
}
/>
These options can also be set (or override global settings) in your dataset object as well for each line.
<Line
data: {
datasets: [{
pointRadius: 0,
pointHoverRadius: 5,
pointHitRadius: 20,
pointBackgroundColor: ...,
}]
}
/>
I am facing issue of deprecated methods:
Chart.js:1990 bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead
How this can be resolved?
I was using following way to set maxBarThickness of bar graph dynamically
this.barOptions.scales.xAxes[0]['barPercentage'] = 0.8;
But this is throwing warnings now.
Please share your suggestions!
This property is no longer part of the xAxis but it can be set directly on the dataset as explained in dataset configuration.
Please also see example usage.
data: {
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
};
I am trying to create a combined bar chart and line graph using chart js:
new Chart(ctx { ... }
I found this sample on Plunker of a combined bar chart and line graph. The line graph appears drawn on top of the bar chart which is the way I want it.
However I copied the sample into jsfiddle and for some reason the bars are drawn over the line.
Is there a way I can explicitly ensure the line graph appears on top of the bar chart?
I have realised it goes according to the order in which you define them. When you define the line graph first then it appears above the bar chart. You can see this in my updated jsFiddle
datasets: [{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}, {
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
} ]
However, this doesn't explain why the original Plunker example doesn't have this issue
I have setup my line chart like this:
How can I remove the green color from the background and make it transparent
Set fill property as false in Dataset options
datasets: [
{
label: "",
fill: false,
.....
.......
data: [65, 59, 80, 0, 56, 55, 40],
}
]
You can refer this fiddle:
https://jsfiddle.net/red_stapler/u5aanta8/1/
Also Reffer chartJs Docs
https://www.chartjs.org/docs/latest/charts/line.html
I'm using Google Visualization to display a target vs performance chart. The chart is split into a few months, and within each month, I have several departments, each with their own targets. The actual performance will be displayed using bar (column) charts, while I'm intending to have the targets displayed as a line. For now, I've chosen to use a stepped area chart with 0 opacity and disconnected lines for the targets, as recommended by this comment.
The issue now is that the stepped area chart displays across the entire category, but I need it to display only across a single column. Currently what I have is (copy and paste the code in the Google Code Playground to see the results):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
connectSteps: false,
series: {3: {type: "steppedArea", areaOpacity: 0}}
});
}
I'm also open to other possible ideas of how to display a target vs performance chart, so other solutions that can also create such a chart would be greatly appreciated. Thanks.
Use the "interval" column role to add a small horizontal line in line with the column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Y1');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addColumn('number', 'Y2');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addRows([
['Jan', 5, 7, 4, 10],
['Feb', 3, 4, 8, 6],
['Mar', 6, 3, 6, 8],
['Apr', 2, 5, 3, 6]
]);
see example at http://jsfiddle.net/asgallant/M7YTG/2/