I have a simple Highchart with a dataset of up to 1000 datas. There are only y values the x values are generated automatically. Also, the values come from my nodejs server so please don't be surprised about the notation.
Now I want 3 special values whose x and y values are known to be highlighted. In which way doesn't matter for now.
One possibility would be to show the point at the location, otherwise they are not displayed. The problem I have is that I don't know how to control a specific point.
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-emg1',
type: 'line'
},
title: {
text: 'EMG 1'
},
xAxis: {
tickInterval: 1
},
yAxis: {
title: { text: 'Voltage'}
},
series: [{
data: [<%-data1 %>]
}]
});
You can use the load event and update specific points. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
const isPointToHighlight = pointsToHighlight.some(
p => p.x === point.x && p.y === point.y
);
if (isPointToHighlight) {
point.update({
color: 'red',
marker: {
enabled: true
}
}, false);
}
});
this.redraw();
}
}
Live demo: http://jsfiddle.net/BlackLabel/tLd3j78f/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
I found a post from 2015 that says that column roles are not supported on Material Design charts. However, on the official documentation, I cannot find any note of it so wondering if that has changed.
I am adding an annotation role, but it doesn't seem to have any effect. Same of other roles, eg tooltip. For tooltip I might be able to work around that using the formatted value of cell, but still don't know how to add html content.
Here is my code :
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness', { role: 'annotation' }],
['Canis Major Dwarf', 8000, 23.3, "BR"],
['Sagittarius Dwarf', 24000, 4.5 , "ME"],
['Ursa Major II Dwarf', 30000, 14.3 , "BR"],
['Lg. Magellanic Cloud', 50000, 0.9, "DA"],
['Bootes I', 60000, 13.1 , "ME"]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
},
focusTarget: 'category',
crosshair: {
trigger: 'selection',
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
The annotation isn't shown anywhere. What am I missing? jsfiddle link here.
When using "Cassic" Line chart I can assign the ticks for the hAxis, also the format and title like this:
var options = {
hAxis: {
format:'h a',
title: 'Time',
ticks: [...range...]
}
}
Is it possible to do the same when using the Material Line chart?
So far I have been able to set the title:
var options = {
axes: {
x: {
0: {label: 'Time'}
}
}
}
I wanted to assign the ticks because I needed to set the start and the end to specific dates, I found another way to accomplish that when using the material line chart:
var lineChartOptions = {
chart: {
title: 'Chart Title'
},
axes: {
y: {
0: { label: 'Label 1' },
},
x: {
0: { label: 'Label 2' },
all: {
range: {
max: new Date(...),
min: new Date(...)
}
}
}
},
legend: { position: 'left' }
};
This worked for me.
Is it possible to give more room for tick labels in plotly.js? Long labels in my charts are getting cut off.
HTML:
<div id="plot"></div>
JavaScript:
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'a looooooooong string'],
orientation: 'h'
}];
var layout = {
title: 'Bar Chart'
};
Plotly.newPlot('plot', data, layout);
I can't see how to do this in the API for y-axes tick settings.
Given the nature of my charts, I need to use a horizontal orientation. So a solution I can't use is a vertical orientation with ticks rotated 90 degrees.
Update: plotly added support for automargins (see https://github.com/plotly/plotly.js/pull/2243), via the .axis.automargin configuration option.
To use, you'd change:
var layout = {
title: 'Bar Chart'
};
to:
var layout = {
title: 'Bar Chart',
yaxis: {
automargin: true
}
};
For more information, see https://plot.ly/javascript/axes/
Original Answer:
You can adjust the margins of plotly charts to give yourself some more space. For instance, change:
var layout = {
title: 'Bar Chart'
};
to
var layout = {
title: 'Bar Chart',
margin: {
l: 200
}
};
you can read more about adjusting margins here: https://plot.ly/javascript/setting-graph-size/
and overall layout options here: https://plot.ly/javascript/#layout-options
You can also set margin dynamically, based on label length:
var maxLabelLength = d3.max(data, d => d3.max(d.y, label => label.length));
const letterWidth = 7;
var layout = {
title: 'Bar Chart',
margin:{
l: maxLabelLength * letterWidth
}
};
Ugh, the documentation for this seems so blasted clear, but I can't seem to correctly change the colors of the bars in my chart. There has to be something obvious that I'm missing....here's what I'm working with at the moment:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
height: 500,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'distance'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
In my mind, I've defined the role, and formatted the colors exactly as they're shown on the docs - and yet I still have all blue (default) bar colorings.
[![Screenshot of Blue Bars][1]][1]
So, yeah, there's that. What did I botch?
As always, SO community, thanks for your time, attention, and expertise.
CDM
Update:
So now I'm here, but still with blue bars:
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Conoco", 8.94, "#b87333"],
["Tesla", 10.49, "silver"],
["Texaco", 19.30, "gold"],
["Yahoo.com", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
The code you posted in your question works fine with a few simple changes:
In this script tag:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
Change 'packages':['bar'] to 'packages':['corechart']
And in this line:
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
Change google.charts.Bar to google.visualization.ColumnChart
And change this options code:
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
To this instead:
var options = {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
legend: {
position: 'none'
},
hAxis: {
title: 'Companies'
},
vAxis: {
title: 'Acres'
}
};
JS Fiddle
Note that the regular Google charts do not support subtitles, so that is why I left the subtitle out in the options code I posted above.
Google material charts do support subtitles, but they apply colors to each series of data in your chart, not to each value within a series. Here's the complete code to use the material chart:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres1", "Acres2", "Acres3", "Acres4"],
["Conoco", 8.94, 10.21, 5.67, 14.53],
["Tesla", 10.49, 16.32, 20.15, 13.49],
["Texaco", 19.30, 17.10, 15.23, 25.37],
["Yahoo.com", 21.45, 22.32, 18.19, 27.43]
]);
var options = {
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
legend: {
position: 'none'
},
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
series: {
0: { axis: 'Acres' },
1: { axis: 'Acres' },
2: { axis: 'Acres' },
3: { axis: 'Acres' }
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
JS Fiddle
I have not found a way to change the color shown on the material chart for each value within a series. So, it looks like you have to make a choice between omitting the subtitle and having the chart colors the way you want, or including the subtitle by using the material chart but having the color for each value within a series be the same.
This how u change the color of graph
var options = {
colors: ['#2980b9']
};
add this color option in ur options variable
in your case
var options = {
width: 700,
colors: ['#2980b9'],
.....
.....
if you have two bars in ur chart den do like this colors: ['#0d6957','#1fb89a']