I need seperate labels mounted for example:
this is an Area Chart from Google Chart. is posible change distance of label to points?
Regards,
I Resolved it, only need add atribute "stem" to an annotations, i share the solution:
series: {
0: {
pointSize: 5,
annotations: {
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11
}
}
},
1: {pointSize: 5,
annotations: {
stem: { length: 20 },
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11,
}
}
},
}
The result:
I hope it help anyone,
Regards
Related
I am creating a QuickChart.io using Chart.JS within a PowerApps canvas and am having some issues with formatting. Everything works on the visualization (filtering, rendering, etc.) but I am trying to remove the gridlines and resize the display area but the formatting options are not showing up. Any idea what's causing this?
"https://quickchart.io/chart?c="&EncodeUrl("{
'type': 'bar',
'data': {
'labels': ["&Concat(Filter(Table2,Scenario=_code),"'"&'X-Axis'&"',")&"],
'datasets': [
{
'label': 'Dataset 2',
'backgroundColor': 'rgba(54, 162, 235, 0.5)',
'borderColor': 'rgb(54, 162, 235)',
'borderWidth': 1,
'data': ["&Concat(Filter(Table2,Scenario=_code),"'"&DataSet1&"',")&"]
}
]
},
'options':
{
'elements': {
'rectangle': {
'borderWidth': 2
}
},
'responsive': true,
'maintainAspectRatio': false,
'legend': {
'display': false
},
'grid': {
display: false
},
'title': {
'display': true,
'text': 'Revenue'
}
}
}")
Your config is invalid, there is no grid option in the root of the options.
Depending on if quick chart is using chartjs V2 or v3 you need to configure it in the scales section
V2: options.scales.xAxes[0].gridLines.display
V3: options.scales.x.grid.display
And then you replace x by y to remove the y grid
I use a DrawChart method and try to set the logarithmic option to the yaxis to true without success:
The datas (for the series) contains :
"[{type:"bar",data:[1.19576304413727E-08,1.30322021618667E-07]}]"
I try to place the logarithmic : true option in several place without succes. For me it must be placed into the yaxis part.
Thank you in advance
chart.updateOptions({
series: datas,
chart: {
toolbar: {
show: showToolbar
},
animations: {
enabled: false
},
type: 'bar'
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
endingShape: 'rounded'
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
title: {
text: 'Masse'
},
categories: categories//,
//tickAmount: 10
},
yaxis: {
labels: {
formatter: function (value) {
//var ex;
return value.toExponential();
//return value;
}
},
title: {
text: unit
},
tickAmount: 10
//min: min,
//max: max,
//decimalsInFloat: 3
},
grid: {
padding: {
left: 50,
right: 50
}
},
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'left',
showForSingleSeries: true,
showForNullSeries: true,
showForZeroSeries: true
},
})
I found the problem !
When you have log values really small (like 5.32E-9), the logarithm option doesnt work if you try to display the legend thrue a JS function.
So multiply by 1E10 the divide into the JS function (where you display the legend) by 1E10.
I'm working on an application that will generate some charts and I'm using chartjs to draw them.
The issue I'm facing is this: the charts will be generated with dynamic data. The application may generate up to 9 datasets and rarely they will have the same size. How can I make chartjs advance or fill the values when the datasets size won't match?
I saw some examples here at stackoverflow and even at chartjs github page but they didn't work me.
This is an example of what I have so far: https://jsfiddle.net/camarrone/49onz8no/1/
Two datasets with different data array. The first value for the second dataset doesn't exist hence it should be zero or null. Like this: https://jsfiddle.net/camarrone/d39a0qgw/
This is "failing" code for reference:
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
type: 'line',
fill: false,
label: 'Label_1',
borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
data: [7,3,11,2,3]
},
{
type: 'line',
fill: false,
label: 'Label_2',
borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
data: [1,6,1,2]
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
}
});
</script>
</body>
</html>
For those facing the same issue and future reference. Here is the working code for my case:
<html>
<head>
<script type='text/javascript' src='./momentjs-with-locales.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
fill: false,
label: 'Page View',
borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
data: [
{
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date('2018-04-21T16:00:00'),
y: 7
},
{
x: new Date("2018-04-21T18:00:00"),
y: 3
},
{
x: new Date("2018-04-21T20:00:00"),
y: 11
},
{
x: new Date("2018-04-23T12:00:00"),
y: 2
},
{
x: new Date("2018-04-23T13:00:00"),
y: 3
}
],
},
//dataset 2
{
fill: false,
label: 'View Content',
borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
data: [
{
labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date("2018-04-21T17:00:00"),
y: 1
},
{
x: new Date("2018-04-21T20:00:00"),
y: 6
},
{
x: new Date("2018-04-23T12:00:00"),
y: 1
},
{
x: new Date("2018-04-23T13:00:00"),
y: 2
}
],
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
scales: {
xAxes: [
{
type:'time',
distribution: 'series',
time: {
unit: 'day',
displayFormat: {
day: 'DD/MM/YYYY'
}
},
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
}
]
}
}
});
</script>
</body>
</html>
DEMO online:
I am not using x/y formatted datasets, so I kept looking. I ended up finding that inserting 'null' values solved my problem--the arrays can then be the same length, and not have drops to zero polluting the shapes.
However, note that this seems to not work with log scales on line graphs. Luckily, the only graphs I use uneven-length datasets on is probably best presented in linear form, but it is irritating.
Note also that you may want to utilize the { spanGaps: false } option.
I have a problem to show my Highchart in a container div.
In the .html file I have the next code:
<div class="col-md-12" style="margin-top:10px">
<div id="container" style="width:100%; height: 500px;"></div>
In my controller I have a function which I create the chart after doing query to the DB and to save the data in the variable media. The chart is created as follows:
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Media'
},
subtitle: {
text: '..'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Media'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Media: {point.y:.1f}'
},
series: [{
name: 'Population',
data: media,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
The "data" are received correctly, the problem is that when I click in a button to call this function and I try to show the chart, appears "http://localhost:8080/graphics#container" in my address bar but the chart doesn't appear till I click the button a second time.
I don't understand why is it happening this and how can I do to show the data in my "first click".
If anyone can help me I will be very grateful.
Thank you!
SOLVED
The probrlem was another function which I used to move the scroll. I deleted it and everything works fine!
The fuction was the following:
function downScroll(){
$location.hash('container');
call $anchorScroll()
$anchorScroll();
}
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.