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:
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 am using ChartJS but I can't figure out how to get rid of the white box in the tooltip. What setting/option will set remove the border/white outline or at least let me set the color?
Thank you!
data_sets.push({
data: date_list["data_counts"],
label: date_list["name"],
fill: true,
backgroundColor: transparentizeColor,
borderColor: newColor,
pointBackgroundColor: newColor,
pointBorderColor: newColor,
})
my_chart = new Chart(ctx, {
type: 'line',
data: {
labels: data["date_labels"],
datasets: data_sets
},
options: {
tooltips: {
intersect: false,
},
elements: {
point: {
radius: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
precision: 0,
suggestedMax: 3,
beginAtZero: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
}, );
There's indeed no option for this, but you can workaround it.
The color of the white outline is controlled by the multiKeyBackground tooltip option. By setting this to be fully transparent (#00000000 or rgba(0, 0, 0, 0)), and disabling the border on the dataset, it'll at least look better (though still not perfect).
As of this writing (Chart.js 3.9.1), control over the display properties of the tooltip legend items can be done using tooltip callbacks. There are a few examples in the docs.
tooltip: {
intersect: false,
mode: 'index',
callbacks:{
labelColor: function(context) {
return {
borderColor: 'rgba(0, 150, 0)',
backgroundColor: 'rgba(0, 150, 0)',
borderWidth: 3,
borderRadius: 2,
}
},
}
},
For example, like the legend item Current is here:
Callbacks are an extremely powerful way to customize charts in Charts.js
I remember I once had this problem as well, but I can't remember an answer, neither I found one after I searched for it...
The only solution I have is using an custom tooltip.
You can alter this JSFiddle I found. They use a circle with border-radius: 5px in the css-class .chartjs-tooltip-key. Remove this line and you have a rectangle.
Either take the whole custom tooltip or use the parts you need.
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 have a big CSV file with 20 columns.
In a single statement, I would like to be able to make chart one take values from column 1 to 10 and chart two to take the values from columns 11 to 20.
This way, I am only reading the CSV once, which should speed up load times.
Currently, I have the below code, which reads the same columns for both charts.
Can anyone advise me how to do this?
Thanks
function FwThroughputStacked(){
$.get("../CRX1/Overall_DAB_Fortinet_Throughput_Report.csv", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
var options = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
isStacked: true,
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var options2 = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
chart.draw(view, options);
var chart = new google.visualization.LineChart(document.getElementById('throughput'));
chart.draw(view, options2);
});
}
sounds like you need separate views for each chart, similar to options
in the following snippet,
view is created for chart
-- and --
view2 is created for chart2
google.charts.load('current', {
callback: function () {
$.get("output.txt", function(csvString) {
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
var view2 = new google.visualization.DataView(data);
view2.setColumns([11,12,13,14,15,16,17,18,19]);
var options = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
isStacked: true,
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var options2 = {
chartArea: {width: '80%', height: '75%'},
explorer: {actions: ["dragToZoom", "rightClickToReset"]},
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
};
var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
chart.draw(view, options);
var chart2 = new google.visualization.LineChart(document.getElementById('throughput'));
chart2.draw(view2, options2);
});
},
packages: ['corechart']
});
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