Changing color of x-axis label in bar chart - react-native

I'm using react-native-charts-wrapper for creating a chart and I was wondering if there is a way to change the x-axis label style for just one bar? I have a whole week in the chart and I want to change the color of the current day. So if today is Monday I just want the M to be a different color. I don't want to change the color of the bar, just the letter under it.
These are settings for xAxis:
xAxis: {
drawAxisLine: true,
drawGridLines: false,
position: 'BOTTOM',
labelCount: 7,
valueFormatter: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
textColor: formatedColor,
axisMinimum: -1,
axisMaximum: 7,
avoidFirstLastClipping: true,
},
I checked the documentation and properties but couldn't find anything.

I think I know
core:google.charts.load('current');
ChartType: ColumnChart;
Don't use the bar
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ],
],
options: {'title': 'Countries'},
containerId: 'columnchart_values'
});
wrapper.draw();
}

Related

Creating shape or marks in custom indicator, (tradingview charting library (pinejs))

is there any way to create shape or create marks on chart in custom indicator using tradingview charting library. I am using this way to create custom indicators. Thanks in advance.
Yes you can. Here is the guide.
For the callouts/Markers on chart you can follow this guide in the JS API.
https://github.com/tradingview/charting_library/wiki/JS-Api#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution
For getmarks you can do this
getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
var Arr = [
{
id: 1,
time: 1551448800000 / 1000,
color: 'blue',
text: 'Hello world',
label: 'B',
labelFontColor: 'yellow',
minSize: 20
},
]
onDataCallback(Arr);
console.log("=====getMarks running");
},
It will plot the marks above the bars as shown in the below image.
For Timescalemarks.
getTimescaleMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
onDataCallback([
{
id: 1,
time: / 1000,
color: 'Turquoise',
label: 'The test you want to show on marker',
minSize: 20,
tooltip:[
"Information you want to print",
]
},
]);
})
The Time scale marks will look like this. And they will be plotted below the bars.
And for the shapes like circles and arrows you can follow this documentation. And use the createMultipointShape(points, options) methos to plot your shapes.
https://github.com/tradingview/charting_library/wiki/Chart-Methods#createmultipointshapepoints-options

How to add a hover label to morris bar graph? [duplicate]

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
I have setup a JSBIN example for the same here:
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
Piece of cake. Demo and code:
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
1: index: it represents record number i.e. from 0 to n records.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
For flying label, you need to add Morris CSS stylesheet to the code - demo
IMPORTANT NOTE
Flying labels works since version 0.4.3
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});

How to adjust the position of several axes in one chart?

I create a line chart using dojo. Recently, I have been applying multiple axis on the chart. But there was a problem here. It is applied to multiple axes in one place I have raised the issue of overlapping tick value. and do not change the properties of leftBottom, is there a way to adjust the shaft position? For example, x: 10, y: 20?
my code
var axisXRef = {labels : labelsample, titleOrientation : "away", stroke : {}, natural : true};
var axisYRef = {vertical : true, stroke : {}};
var chart = new Chart("chartNode");
chart.addPlot("lines", { type: Lines, tension: 3 ,min:0});
chart.addPlot("stacklines", { type: StackedLines, tension: 3 ,hAxis:"x",vAxis:"y1"});
chart.addPlot("areas", { type: Areas, tension: 3,hAxis:"x",vAxis:"y2" });
chart.custom.axisX = lang.clone(axisXRef);
chart.custom.axisY = lang.clone(axisYRef);
chart.addAxis("x", chart.custom.axisX);
chart.addAxis("y", chart.custom.axisY);
chart.addAxis("y1", {
vertical: true,
min : 50,
max:70,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"red",length:50},
minorLabels: true, minorTicks:true, minorTick:{color:"red",length:50},
microTicks: true, microTick:{color:"red",length:50},
fixUpper: "major",
fixLower:"minor"
});
chart.addAxis("y2", {
vertical: true,
min : 0,
max:49,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"blue",length:25},
minorLabels: true, minorTicks:true, minorTick:{color:"blue",length:25},
microTicks: true, microTick:{color:"blue",length:25},
fixUpper: "major",
fixLower:"minor"
});
Unfortunately Dojo charting only supports two axis per direction both axis being on different side of the chart. In other words you can't have two axis both on the left side of the chart. You have to have one right side using leftBottom: false property.

Sencha Touch chart - How to add label/value in line chart

I am using Sencha Touch charts 1.0.0 for my project. I would like to add values on each point in my line chart (as in image). I tried the same approach in this question for column chart, but it didn't work out.
I had the same problem with you. But i find a solution instead for that. You can add marker at each node of line and when you click on marker a popup will show detail information as you want. This's my code may help you :
-Add marker in cofig of series :
type: 'line',
title: 'Clickeds : ' + total[4] + ' ( ' + Math.round(arrInfo[4]) + '% )',
highlightCfg: { scale : 0.7 },
xField: 'Date', yField: 'Clks',
style : {
stroke: 'rgb(50, 185, 150)',
miterLimit : 3,
lineCap: 'miter',
lineWidth: 2
}
,
marker:{
type: 'image',
src: 'resources/images/square.png',
width: 24,
height: 24,
x: -12,
y: -12,
scale: 0.5,
fx: {
duration: 200
}
}
Handle event when you click on node, you add listeners to config of chart : `listeners: {
itemtap: function( series, item, event, eOpts ){
//handle your code here.
}`
Regards,
(Sorry for bad english.)

Dojo charting: How do you return an error if the chart is empty?

I'm pulling information from a database and putting it into a dojo chart. I'm trying to figure out how to return a 'no data message' with the way this chart is working:
var chart1 = new dojox.charting.Chart2D("traffic");
chart1.addPlot("default", {type: "Columns", gap: "15"});
chart1.addAxis("x", {minorTicks: false, font: "normal normal bold 9pt Arial",
labels: [{value: 1, text: 'Monday'},{value: 2, text: 'Tuesday'},{value: 3, text: 'Wednesday'},{value: 4, text: 'Thursday'},{value: 5, text: 'Friday'},{value: 6, text: 'Saturday'},{value: 7, text: 'Sunday'}]});
chart1.addAxis("y", {vertical: true, minorTicks: false, min: 0, font: "normal normal bold 12pt Arial"});
chart1.addSeries("Series 1", [<?php echo $trafficseries; ?>]);
chart1.setTheme(dojox.charting.themes.PlotKit.blue);
chart1.addPlot("Grid", {
type: "Grid",
hAxis: "x",
vAxis: "y",
hMajorLines: true,
hMinorLines: false,
vMajorLines: false,
vMinorLines: false
});
var anim_t = new dojox.charting.action2d.Tooltip(chart1, "default");
chart1.render();
Where would I add some sort of error handling if the data was empty?
Check, if your data has no points, and overlay a <div> over a chart with "no data" message. Otherwise hide it.