We are trying to display three sets of data, two stacked, one unstacked using chart.js. We defined two sets of axis where only the stacked data shows and the unstacked data does not. We can only get the axis to display or not display, but we cannot get the data to appear at all.
We know the data is valid because we can get all of the data to stack together, but not separately.
recycleChartData = {
"type":"bar",
"data":{
"labels":["Mar-2016"],
"datasets":[
{
"label":"benchmark",
"backgroundColor":"#ff3300",
"yAxisID":"stacked_testY2",
"xAxisID":"stacked_testX2",
"data":["2632.29"]
},
{
"label":"Crossville",
"backgroundColor":"#009900",
"yAxisID":"stacked_testY",
"xAxisID":"stacked_testX",
"data":["2268.44"]
},
{
"label":"test",
"backgroundColor":"#ffff00",
"yAxisID":"stacked_testY",
"xAxisID":"stacked_testX",
"data":["181.92"]
}
]
},
"options":{
"scales":{
"yAxes":[
{
"id":"stacked_testY",
"position":"left",
"stacked":true,
"display":true
},
{
"id":"stacked_testY2",
"position":"left",
"stacked":false,
"display":false
}
],
"xAxes":[
{
"id":"stacked_testX",
"position":"bottom",
"stacked":true,
"display":true
},
{
"id":"stacked_testX2",
"position":"bottom",
"stacked":false,
"display":false
}
]
}
}
};
It's odd that your code doesn't work, if you change the non-stacked dataSet to a line graph you see the data! Maybe worth posting an issue on the chartjs github.
But...
There was a feature released in 2.5.0 which will allow for this sort of scenario. More on what it is can be read here, https://github.com/chartjs/Chart.js/issues/2643.
Basically, you can add a new property stack on each of your dataSets to denote which stack you would like it to go on to, so for example with your data you could remove the extra scales and have 2 stacks
var config = {
"type": "bar",
"data": {
"labels": ["Mar-2016","Apr-2016"],
"datasets": [ {
"label": "Crossville",
"backgroundColor": "#009900",
"data": ["2268.44","2268"],
stack: 2,
}, {
"label": "test",
"backgroundColor": "#ffff00",
"data": ["181.92","181.92"],
stack: 2
},{
"label": "benchmark",
"type": "bar",
"backgroundColor": "#ff3300",
"data": ["2632.29","2632.29"],
stack: 1
}]
},
"options": {
"scales": {
"yAxes": [{
"id": "stacked_testY",
"type": 'linear',
"position": "left",
"stacked": true,
"display": true
}],
"xAxes": [{
"position": "bottom",
"stacked": true,
"display": true
}]
}
}
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="chart"></canvas>
</div>
I came across this issue when trying to find out how to stack specific datasets of a line diagram in Chart.js v2.x.
Chart.js v3.x supports the stack attribute for line diagrams but in Chart.js v2.x:
you have to use multiple y-axis
to align the values you need to calculate the maximal value yourself and set ticks.max or ticks.suggestedMax in the axis configuration.
false console:
let yMax = 3000; // Calculate value beforehand.
var config = {
"type": "line",
"data": {
"labels": ["Mar-2016","Apr-2016","May-2016"],
"datasets": [ {
"label": "Crossville",
"backgroundColor": "#009900",
"data": ["2268.44","2268","31"]
}, {
"label": "test",
"borderColor": "#ffff00",
"data": ["181.92","181.92", "1000"],
"yAxis": 'A'
},{
"label": "benchmark",
"backgroundColor": "#ff3300",
"data": ["2632.29","2632.29","500"]
}]
},
"options": {
"scales": {
"yAxes": [
{
"id": "A",
ticks: {
beginAtZero: true,
display: true,
suggestedMax: yMax
},
},
{
"stacked": true,
"ticks": {
beginAtZero: true,
display: true, // Set this to false so that only one axis is shown!!!
suggestedMax: yMax
},
},
],
"xAxes": [{
"position": "bottom",
"stacked": true,
"display": true
}]
}
}
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div style="width:75%;">
<canvas id="chart"></canvas>
</div>
Related
I am trying to draw a highchart using JSON data. My data has multiple series. Because of that 2 pie charts are created overlapping each other. Is there a way for me to draw the multiple highcharts next to each other instead?
My JSON, code and working example of the pie charts overlapping each other:
let data = [{
"name": "cakes",
"data": [
[
"us",
149045
],
[
"es",
41746
],
[
"uk",
37640
],
[
"au",
16594
]
],
"marker": {
"symbol": "circle"
}
}, {
"name": "pie",
"data": [
[
"us",
128845
],
[
"es",
35752
],
[
"uk",
32246
],
[
"au",
14333
]
],
"marker": {
"symbol": "circle"
}
}]
Highcharts.chart('container', {
chart: {
type: 'pie',
zoomType: 'xy'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
// format: '{series.data[0]} <b>{point.percentage:.1f}%</b>'
}
},
},
series: data
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
How do I get pie charts next to each other rather than one on top of the other? One for cakes and one for pies?
You can create multiple charts with dynamically calculated styles:
data.forEach(function(dataEl) {
const createdDiv = document.createElement('div');
createdDiv.style.display = 'inline-block';
createdDiv.style.width = 100 / data.length + '%'
mainContainer.appendChild(createdDiv);
Highcharts.chart(createdDiv, {
...,
series: [dataEl]
});
});
Live demo: https://jsfiddle.net/BlackLabel/jn4p2gq8/
Or one chart with dynamically calculated center property for each series.
API Reference: https://api.highcharts.com/highcharts/series.pie.center
I am making a simple bar graph in Highcharts and want all the columns of the graph blue except for one. I have found how to change the color on one column when the data in the data set is in an array by using {y:value, color:"color"} on the particular data point you want to change. However, my values are in CSV form and this technique doesn't work.
I have tried to use the technique used for an array, that is {y:value, color:"color"} in the data set in various ways to no avail. I am looking for the proper way to do this when the data is in CSV format.
Here is a link to the specific graph: https://cloud.highcharts.com/show/B4SzUwwfY
Here is a copy of it's code:
"title": {
"text": "Ranking"
},
"subtitle": {
"text": ""
},
"exporting": {},
"chart": {
"polar": false
},
"plotOptions": {
"series": {
"animation": false,
"states": {
"inactive": {}
}
}
},
"xAxis": {
"index": 0,
"isX": true
},
"yAxis": {
"index": 0
},
"series": [
{
"turboThreshold": 0,
"_colorIndex": 0,
"_symbolIndex": 0,
"type": "column"
}
],
"annotations": [],
"data": {
"csv": "\"Entidad Federativa\";\"IDD-Mex 2018 ajustado a 10\"\n\"Aguascalientes\";10\n\"Baja California\";5.59398491\n\"Baja California Sur\";4.05317227\n\"Campeche\";8.01039005\n\"Chiapas\";1.15462263\n\"Chihuahua\";2.18559243\n\"Ciudad de México\";8.11808497\n\"Coahuila \";9.459552\n\"Colima\";6.90986012\n\"Durango\";4.47116843\n\"Guanajuato\";8.3311538\n\"Guerrero\";0\n\"Hidalgo\";4.75098071\n\"Jalisco\";3.3524999\n\"México\";5.01473714\n\"Michoacán \";3.90996208\n\"Morelos\";0.08613278\n\"Nayarit\";8.88474972\n\"Nuevo León\";6.88061019\n\"Oaxaca\";0.80450639\n\"Puebla\";1.53056493\n\"Querétaro\";7.32162985\n\"Quintana Roo\";4.84243048\n\"San Luis Potosí\";4.35040285\n\"Sinaloa\";6.63553281\n\"Sonora\";4.77125446\n\"Tabasco\";3.16869854\n\"Tamaulipas\";5.4656673\n\"Tlaxcala\";2.95165746\n\"Veracruz\";0.65919776\n\"Yucatán\";8.62090825\n\"Zacatecas\";8.03275369",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"chartarea": {},
"plotarea": {},
"tooltip": {},
"credits": {},
"stockTools": {
"gui": {
"buttons": [
"simpleShapes",
"lines",
"crookedLines"
],
"enabled": false
}
},
"navigation": {
"events": {
"showPopup": "function(e){this.chart.indicatorsPopupContainer||(this.chart.indicatorsPopupContainer=document.getElementsByClassName(\"highcharts-popup-indicators\")[0]),this.chart.annotationsPopupContainer||(this.chart.annotationsPopupContainer=document.getElementsByClassName(\"highcharts-popup-annotations\")[0]),\"indicators\"===e.formType?this.chart.indicatorsPopupContainer.style.display=\"block\":\"annotation-toolbar\"===e.formType&&(this.chart.activeButton||(this.chart.currentAnnotation=e.annotation,this.chart.annotationsPopupContainer.style.display=\"block\")),this.popup&&(c=this.popup)}",
"closePopup": "function(){this.chart.annotationsPopupContainer.style.display=\"none\",this.chart.currentAnnotation=null}",
"selectButton": "function(e){var t=e.button.className+\" highcharts-active\";e.button.classList.contains(\"highcharts-active\")||(e.button.className=t,this.chart.activeButton=e.button)}",
"deselectButton": "function(e){e.button.classList.remove(\"highcharts-active\"),this.chart.activeButton=null}"
},
"bindingsClassName": "tools-container"
}
}
In load event function you can use update method on a specific point and change the color:
chart: {
...,
events: {
load: function() {
var point = this.series[0].points[3];
point.update({
color: 'red'
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4yz6Ln1m/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change.
Full code is here:
https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html
Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row.
And if I do resize (like 1mm) it will start working correctly.
Any idea what could be the problem?
In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the JS.
.apexcharts-canvas {
position: relative;
user-select: none;
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
}
/* scrollbar is not visible by default for the legend, hence forcing the visibility */
Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language.
You need to move all your scripts to the end instead of injecting in the HTML to allow the SVG Document parser to get the element's size correctly.
Working Codepen Example
var options = {
"chart": {
"height": 350,
"type": "line",
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
},
"autoSelected": "zoom"
}
},
"plotOptions": {
"bar": {
"horizontal": true
}
},
"dataLabels": {
"enabled": true,
"offsetX": -6,
"style": {
"fontSize": "12px",
"colors": [
null
]
}
},
"series": [{
"name": "People count",
"data": [
400,
430,
448
]
},
{
"name": "People death",
"data": [
450,
0,
200
]
}
],
"xaxis": {
"type": "category",
"categories": [
"2015",
"2016",
"2017"
]
},
"stroke": {
"show": true,
"curve": "straight",
"width": 2,
"colors": [
"#0000ff",
"#008000"
]
},
"legend": {
"position": "right",
"offsetY": 100,
"height": 230
},
"title": {
}
}
var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
options
);
chart.render();
I am making an AMcharts stockchart with markers on it. The way I have done the markers is by taking the value of the price series only if a condition is met. Therefore the data has 4 columns:
Date
SPY price (SP500 etf)
Daily RSI Stance 1 (1,0 boolean value)
Signal (If Daily RSI Stance 1 = 1, SPY price, else blank)
CSV with data found here:
http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv
The problem is that even though the data is perfectly aligned it does not show that way on the amcharts chart, which has me completely stumped. The markers ie. "4. Signal" show up under the "2. SPY price" timeseries. As shown here:
and finally for the code:
This first part is contained in the larger code below and it is what makes both timeseries appear.
"panels": [ {
"stockGraphs": [ {
"id": "g1",
"title": "SPY Price",
"valueField": "spy",
//"type": "line",
"lineColor": "#39fe90",
"useDataSetColors": false
},{
"id": "g2",
"title": "Signal",
"valueField": "Signal",
"bulletSize": 10,
"bullet": "round",
//"bulletBorderAlpha": 1,
"lineColor": "#551A8B",
"useDataSetColors": false
AmCharts.loadFile( "http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv", {}, function( response ) {
var csvData = AmCharts.parseCSV( response, {
"useColumnNames": true
});
//var csvDataLength = csvData.length;
chartData = [];
guideData = [];
//var a = 0;
//var b = 0;
//var c;
var lastdate;
var firstdate;
$.each(csvData, function(i,k){
if(k.Date != undefined) {
chartData.push( {
"Date": k.Date,
"SPY": k.SPY,
"Signal": k.Signal
})
}
});
//console.log(guideData);
chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"labelRotation" : 30,
"minPeriod": "DD",
"axisAlpha" : 1,
"gridAlpha": 0,
//"dateFormats" : "MMM-YYYY",
},
"legend": {
"useGraphSettings": true
},
"dataSets": [ {
"fieldMappings": [{
"fromField": "SPY",
"toField": "spy"
},
{
"fromField": "Signal",
"toField": "Signal"
}],
"dataProvider": chartData,
"categoryField": "Date",}],
//Where the chart gets populated
"panels": [ {
"stockGraphs": [ {
"id": "g1",
"title": "SPY Price",
"valueField": "spy",
//"type": "line",
"lineColor": "#39fe90",
"useDataSetColors": false
},{
"id": "g2",
"title": "Signal",
"valueField": "Signal",
"bulletSize": 10,
"bullet": "round",
//"bulletBorderAlpha": 1,
"lineColor": "#551A8B",
"useDataSetColors": false
}],
"stockLegend": {
//"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]",
//"labelText" : "SPY",
"combineLegend": true,
"markerType" : "line"
}
}, ],
"chartScrollbarSettings": {
"graph": "g1",
"usePeriod": "DD",
"position": "bottom",
"gridAlpha": 0
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"inputFieldsEnabled" : true,
"position": "top",
"periods": [ {
"period": "YYYY",
"count": 2,
"label": "2Y"
}, {
"period": "YYYY",
"count": 5,
"label": "5Y"
},
{
"period": "YYYY",
"count": 10,
"label": "10Y"
},
{
"period": "MAX",
"label": "MAX",
"selected": true,
}
]
},
"valueAxesSettings": {
"gridColor": "#555",
"gridAlpha": 0,
//"axisAlpha" : 1,
"inside": false,
"position": "right",
"showLastLabel": true
},
"panelsSettings": {
"usePrefixes": false,
"marginRight" : 20,
"marginBottom" : 10,
"marginLeft" : 20,
"marginTop" : 10
},
"export": {
"enabled": true,
"position": "top-left"
}
} );
/*chart.addListener("init", function(event) {
console.log(event);
});*/
});
If anyone has any ideas about this it would be greatly appreciated.
Thank you very much.
The issue is due to the stock chart's data grouping functionality. The chart groups data to improve performance when there a lot of points visible, which impacts how the line is drawn as it is using points derived from its data grouping algorithm. By default it's using the "Close" value in the grouping to plot your points and changing the periodValue in your SPY graph will change the appearance. Since your Signal data set has much fewer points in comparison, the chart simply plots out the raw values for that graph, which do not match up to your grouped SPY graph's values, regardless of which periodValue you use.
Your only option to make the values from both graphs line up correctly is to disable data grouping by setting maxSeries to 0 in your categoryAxesSettings. This will impact performance if you have a lot of points.
Here's a codepen of your chart with maxSeries set to 0.
I am using highcharts-ng and when i draw column chart with navigator and apply animation on it. only navigator line animate.
{
"options": {
"chart": {
"backgroundColor": "#eaeaf2",
"type": "column",
"zoomType": "xy"
},
"navigator": {
"enabled": true
},
"plotOptions": {
"series": {
"animationLimit": "Infinity",
"animation": {
"duration": 9000
}
}
},
},
"credits": {
"enabled": false
},
"useHighStocks": true,
"series":
}
]
}
highcharts-ng
Jquery highcharts same data
It is a known bug in highcharts-ng caused by navigator. Reported here.
As a workaround you can define global animation in chart property.
"chart": {
"backgroundColor": "#eaeaf2",
"type": "column",
"zoomType": "xy",
"animation": {
"duration": 9000
}
},
example: http://jsfiddle.net/r88yszk0/488/