I'm using Visualization: Column Chart and I have the annotations set to 'line', what I want to do is move the position of the annotations so they show above the bar, is this possible?
You can see the issue I am having in the image below:-
My code is currently as follows:-
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "{{$sample->name}} {{$test->name}} 'z' scores",
height: 400,
annotations: {
style: 'line',
textStyle: {
fontSize: 10,
},
},
bar: {groupWidth: "95%"},
legend: { position: "none" },
tooltip: {isHtml: true, ignoreBounds: true},
};
If you have a look at the following JSFIDDLE, I basically just want to move the annotations directly above the bar, so that they don't obstruct the bar.
Any help would be much appreciated.
Related
https://water.sas.usace.army.mil/chart.htm
https://water.sas.usace.army.mil/chart.png
See the Code Above, (View Source)
The code builds a time-series chart.
The scales section has unit set to month, however chart does not display with monthly increment on x axis.
Also Y axis will not display title.
The main problem is that config is not properly formatted, options.plugins is not closed by a }, hence the entire scales section is not considered by Chart.js.
Further, you should also define a time.parser to let the date adapter know how to parse the provided date strings.
Be careful to choose the correct date-fns formats for time.parser as well as for time.displayFormats.
Therefore, if you define config as follows, it should work.
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
I've assigned three different colours to the labels, but the colour dots always show up as Blue, Green and Yellow. I'm pretty sure I've done something wrong.
The code I've written is:
var pieSimpleChart = {
chart: {
height: 350,
type: 'pie',
},
legend: {
position: 'bottom'
},
labels: ["IT", "Product Development", "Sales"],
series: [2, 2, 6],
fill: {
colors: ["#447b40", "#cc7870", "#e74ce4"]
}
}
var chart = new ApexCharts(document.querySelector("#task-pie-chart"), pieSimpleChart);
chart.render();
How can I match the labels to my selected colours?
I fixed it by removing "fill" option.
Now code looks like:
var pieSimpleChart =
{
chart:
{
height: 350,
type: 'pie',
},
legend:
{
position: 'bottom'
},
labels: ["IT", "Product Development", "Sales"],
series: [2, 2, 6],
colors: ["#447b40", "#cc7870", "#e74ce4"]
}
Use backgroundColor instead off fill: colors.
Also, you should use the dataset object for passing the values:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["IT", "Product Development", "Sales"],
datasets: [{
backgroundColor: [
"#ff0000",
"#00ff00",
"#0000ff"
],
data: [2, 2, 6]
}]
},
options: {
legend: {
position: 'bottom'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<div class="container">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
I am using doughnut from chart.js for visualization in my application.
I need to remove the label if the percentage is bellow a static value like ,20%
This is what i used to generate the labels
var myChartOptions= {
responsive: true,
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
labels: {
render: 'percentage',
fontColor: '#000000',
precision: 2,
}
}
};
I've been working at this for awhile now with no luck.
It looks like chartjs-plugin-labels is being used, in which case passing a custom function to the render option will do the trick, as per the documentation:
const data = [1, 2, 7],
myChartOptions = {
responsive: true,
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
labels: {
render: args => {
if (args.percentage < 20) {
return '';
}
return args.percentage + '%';
},
fontColor: '#000000',
precision: 2,
}
}
};
new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
datasets: [{
label: 'series 1',
data: data,
backgroundColor: ['pink', 'lightgreen', 'lightblue'],
}]
},
options: myChartOptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>
I am using react-chart js in my graph I am drawing a multi-vertical line using annotation this my sample code i had used to draw line
const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
const splitArrayPopup = map(testValue, el => ({
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: parseFloat(el),
borderColor: '#e0e2e2',
borderWidth: 1,
borderDash: [3, 3],
label: {
content: parseFloat(el),
position: 'bottom',
enabled: true,
backgroundColor: 'transparent',
fontColor: '#e0e2e2',
fontStyle: 'normal',
yPadding: 0,
yAdjust: -10,
},
}));
i need to show my label text at bottom of the graph i mean outside the graph, right now for me going inside the graph.
I wish Google Charts error messages were a little more clear. I'm getting the following error:
Chart not displayed due to error: a[jc] is not a function. Full error object follows.
In the object that follows it doesn't give much additional information.
My columns are specified like this:
chartData.data.cols = [
{
id: "some-date",
label: "Date",
type: "datetime",
},
{
id: "somenumber",
label: "Some Number",
type: "number",
},
];
And my rows are created like this:
var dateObject = new Date("2014-12-06T10:30:00-0800");
var newRow = {
c: [
{
v: dateObject,
},
{
v: arrayItem.predicted_dst,
},
],
}
My options.haxis is:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baseline: 1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
It took me a while to solve this problem so I thought I'd post the situation. It turns out that the baseline:1 was causing the issue.
In my code the baseline 1 was in there as a default for the many other charts I've been creating.
My options now look like this:
hAxis: {
title: "Default hAxis Title",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
gridlines: {
color: '#ECF0F1', //$lightGreyAccent'
count: -1,
},
direction: -1,
baselineColor: '#ECF0F1', //$lightGreyAccent
},
I'm not sure why the Google Chart error message is so cryptic, but if anyone else gets this error