Develop Reference

How to change color of single column in Highcharts column graph when data is in CSV form?

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

AMcharts stockchart 2 timeseries on y axis

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.

How to show stacked and unstacked bar graphs together in Chart.js

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>

Click event for label in amCharts

I am working on amCharts Donut chart.
Following is the script for creating the chart.
JS
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"pullOutDuration":0.5,
"pullOutRadius": "5",
"theme": "light",
"dataProvider": [ {
"title": "Aaa",
"value": 10,
}, {
"title": "Bbb",
"value": 10,
},{
"title":"Ccc",
"value":10,
},{
"title":"Ddd",
"value":10,
},{
"title":"Eee",
"value":10,
}],
"titleField": "title",
"valueField": "value",
"labelRadius": 50,
"radius": "35%",
"innerRadius": "85%",
"labelText": "[[title]]",
"export": {
"enabled": true
},
"baseColor":"#7a4436",
"pullOutOnlyOne":true,
"startEffect":"easeOutSine",
"pullOutEffect":"easeOutSine",
"showBalloon":false,
"listeners": [{
"event": "clickSlice",
"method": function(e) {
var dp = e.dataItem.dataContext;
alert(dp.title + ':'+dp.value)
e.chart.validateData();
}
}]
});
I am able to give click event listener for each slice of the chart.
But I would like to add a click event for label of each slice. So here in my example click event for the labels Aaa, Bbb, etc..
Edit
or how to give an anchor tag to these Labels??
Here is the working fiddle demo

Normally the listener for clickSlice is only attached to the wedge and the little tick to the label, but not to the label itself.
You can do this manually though, using this code piece:
chart.addListener("init", function() {
var d = chart.chartData;
for (var i = 0; i < d.length; i++) {
d[i].label.node.style.pointerEvents = "auto";
chart.addEventListeners(d[i].labelSet, d[i]);
}
});
As the labels have the pointer-events style assigned to none automatically, you have to change this back, so the mouse-events can be registered. Then you can add a listener manually to the svg element using a method provided by the chart.
You have to do this after the chart was initialized. However if you want to remain the e.chart.validateData() call in your handler, you have to listen on a different event (like drawn).
If the purpose of e.chart.validateData() was to stop a slice to be pulled out, the better way to do this would be using pullOutRadius: 0
Here's a demo.

Updated simple answer for v4:
const yAxisLabel = mySeries.bullets.push(new am4charts.LabelBullet());
yAxisLabel.label.interactionsEnabled = false;

dynamically changing chart series extjs 4

I'm using Extjs 4 with the MVC architecture.
I have a python script that outputs this Json Data :
{
"data": [
{
"inAnalysis": 3,
"inQuest": 2,
"inDevelopment": 6,
"total": 12,
"inValidation": 1,
"Month": 1303
},
{
"inAnalysis": 1,
"total": 5,
"Month": 1304,
"inDevelopment": 4
}
],
"success": true,
"metaData": {
"fields": [
{
"name": "inAnalysis"
},
{
"name": "inQuest"
},
{
"name": "inDevelopment"
},
{
"name": "inValidation"
},
{
"name": "isDuplicate"
},
{
"name": "New"
},
{
"name": "total"
}
],
"root": "data"
}
}
I want the fields of my MetaData to be used as the chart series, so I have a store like this :
Ext.define('Proj.store.ChartData', {
extend: 'Ext.data.Store',
autoload: true,
proxy: {
type: 'ajax',
url : 'data/getParams.py',
reader: new Ext.data.JsonReader({
fields:[]
}),
root: 'data'
}
And to add series to the chart I did this :
var chart = Ext.widget('drawchart');
var fields = [];
chartStore.each(function (field) {
fields.push(Ext.create('Ext.data.Field', {
name: field.get('name')
}));
});
chartModel.prototype.fields.removeAll();
chartModel.prototype.fields.addAll(fields);
var series = [];
for (var i = 1; i < fields.length; i++) {
var newSeries = new Ext.chart.BarSeries({
type: 'column',
displayName: fields[i].name,
xField: ['Month'],
yField: fields[i].name,
style: {
mode: 'stretch',
color: this.chartColors[i + 1]
}
});
series.push(newSeries);
chart.series = series;
};
chart.bindStore(chartStore);
chart.redraw();
chart.refresh();
But It's not working, I think the fields array is always empty...
Any help would be appreciated:

Swapping or reloading a store would be easy, however you'd have a very hard time reconfiguring axes and series a posteriori... Ext's chart just don't support that. It would be possible to replace the axis in the myChart.axes collection, and same for series, and then with a careful study of the code, replace remove the existing sprites, etc. However that's a fool's path since, for once your code will be very fragile against future evolutions of Ext's chart code (which happen), and second there is a far more easier and reliable solution. That is creating a new chart, remove the old one, put the new one in its place, and pouf! The user won't see the difference.
You're not giving a lot of information about your code, so I'll work a solution out of the Bar chart example.
First, you need to fix your store:
Ext.define('Proj.store.ChartData', {
extend: 'Ext.data.Store',
//autoload: true,
autoLoad: true, // there was a type in there
fields: [], // was missing
proxy: {
type: 'ajax',
url : 'data/getParams.py',
// better to inline the proxy (lazy init)
reader: {
type: 'json'
,root: 'data' // and root is an option of the reader, not the proxy
}
// reader: new Ext.data.JsonReader({
// fields:[]
// }),
// root: 'data'
}
});
Then, let's enrich your response a bit in order to minimize the prior client-side knowledge of the model to none. I've added a totalField and a categoryField to the metaData node, that we'll use for the axis and series:
{
"data": [
{
"inAnalysis": 3,
"inQuest": 2,
"inDevelopment": 6,
"total": 12,
"inValidation": 1,
"Month": 1303
},
{
"inAnalysis": 1,
"total": 5,
"Month": 1304,
"inDevelopment": 4
}
],
"success": true,
"metaData": {
"totalField": "total",
"categoryField": "Month",
"fields": [
{
"name": "Month"
},
{
"name": "inAnalysis"
},
{
"name": "inQuest"
},
{
"name": "inDevelopment"
},
{
"name": "inValidation"
},
{
"name": "isDuplicate"
},
{
"name": "New"
},
{
"name": "total"
}
],
"root": "data"
}
}
Please, notice that the proxy will catch the metaData in the response automatically and reconfigure its store's (implicit) model accordingly... so you don't need your gloubiboulga to do it yourself. It is also worth noting that the reader will keep a copy of the raw response data in its rawData property; that will be useful to get the custom information we've added.
Now that we have a proper store that will receive a detailed response, let's use it:
new Proj.store.ChartData({
listeners: {
load: replaceChart
}
});
That will trigger the replaceChart method, that will create a brand new chart from the meta and data given by the server and destroy and replace the old one. Here's the function:
function replaceChart(chartStore) {
// Grab the name of the total & category fields as instructed by the server
var meta = chartStore.getProxy().getReader().rawData.metaData,
totalField = meta.totalField,
categoryField = meta.categoryField;
// Build a list of all field names, excluding the total & category ones
var fields = Ext.Array.filter(
Ext.pluck(chartStore.model.getFields(), 'name'),
function(field) {
return field !== categoryField && field !== totalField;
}
);
// Create a pimping new chat like you like
var chart = Ext.create('Ext.chart.Chart', {
store: chartStore,
legend: true,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: [totalField]
}, {
type: 'Category',
position: 'left',
fields: [categoryField]
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: fields
},
xField: categoryField,
yField: fields,
stacked: true // or not... like you want!
}]
});
// Put it in the exact same place as the old one, that will trigger
// a refresh of the layout and a render of the chart
var oldChart = win.down('chart'),
oldIndex = win.items.indexOf(oldChart);
win.remove(oldChart);
win.insert(oldIndex, chart);
// Mission complete.
}

Try to clear lines cache of unused series:
Ext.Array.each(chart.series.items, function(item){
if(!item.items.length){
item.line = null;
}
});