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
Related
im using ChartJs for displaying graph, and i try to costumize tooltip height using height on options based on ChartJs documentation.
https://www.chartjs.org/docs/latest/configuration/tooltip.html
but it doesnt work.
this is my option on my Chart.
options {
tooltips: {
mode: 'point',
intersect: true,
xPadding: 10,
yPadding: 10,
bodySpacing: 4,
backgroundColor: '#fff',
borderColor: '#eff6ff',
borderWidth: 2,
height: 10,
titleFontColor: '#1fb7c7',
bodyFontColor: '#333333'
}
}
i need to make the tooltip like this way.
There is no configuration naming 'height' for tooltips, so it will not work.
tooltips: {
height:10
}
Instead, you can use bodyFontSize, the height of the tooltip will be altered based on the value you assign to it.
tooltips: {
bodyFontSize:15
}
And use position and mode options to change the postion of the tooltips.
How to change the default color, which is pink & blue to some other colors.
I know ways to set each bar a different color, but I need a user defined same color for all the charts.
How can I achieve this. ?
html code
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartClick)="chartClicked($event)"></canvas>
Typescript code
this.barChartData.push({
label: 'Request',
data: requests,
backgroundColor: "#bcf5ec"
},
{
label: 'Feedback',
data: feedbacks,
backgroundColor:'rgb(255, 255, 255)'
}
);
Here in image its pink & blueI need to change it to yellow & red
Just change the backgroundColor.
Use an extra variable for data and options so you can access them easily.
I made you an example where you can change the colors dynamically.
If you want to change them once at the start it's much easier.
Added [colors]="barChartColors" in html & define colors in barChartColors.
Typescript
public barChartColors: any [] =[
{
backgroundColor:'#91ebda',
//borderColor: "rgba(10,150,132,1)",
// borderWidth: 5
},
{
backgroundColor:'rgb(97 174 55, 1 )',
// borderColor: "rgba(10,150,132,1)",
// borderWidth: 5,
}
]
html
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
[colors]="barChartColors"
(chartClick)="chartClicked($event)"></canvas>
Chart.js Ionic 2 Angular2: Background color of bar graph not changing
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 a dataset that has 1-2 entries per day and I don't want that many labels on the x-axis so I am going through them and only showing every 5th or 10nth one. My issue is I do want to show the label for each one in the tooltips. I have a second array or data with the original label set that I want to use for tooltips but can't seem to figure it out. I assume there should be a fairly simple solution for this.
Below is a simple example. I tried adding the cutom option on tooltips with the second dataset but no luck.
var labels = ["10-23-2017", "", "10-25-2017", ""];
var labels2 = ["10-23-2017", "10-24-2017", "10-25-2017", "10-26-2017"];
var chart = document.getElementById('chart').getContext('2d');
var myChart = new Chart(chart, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: "Readings",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
// Configuration options go here
options: {
tooltip: [{
enabled: true,
custom: labels2
}]
}
});
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/