I am rendering a Gantt chart with different series color. The colors are somehow not reflected on the navigator at the bottom. How can I display the same colors in both series and navigator?
Fiddle link : Fiddle
Note: These colors are going to be dynamic which will be based on different cases. So I want them to reflect in the navigator too, dynamically.
I am changing color of the series like so :
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
p.color = 'grey'
});
}
}
},
As you can see series color is grey but in the navigator below, I see different colors.
As per highcharts-gantt documentation:
Update the series with a new set of options. For a clean and precise handling of new options, all methods and elements from the series are removed, and it is initialized from scratch.
On event, you should then go through given serie points and change its options (in your case 'color').
The changes will be applied in the timeline below - example code changes the color after 1,5sec.
//Updating the color
setTimeout(function() {
for (var i = 0; i < chart.series[0].points.length; i++) {
chart.series[0].points[i].update({
color: "grey"
});
}
}, 1500);
Working example
In your code it would be:
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
p.update({color: "grey"});
});
}
}
To avoid shrink of timeline - launch setExtremes() after chart update.
Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart.
//Fully selected timeline
this.xAxis[0].setExtremes();
Working example - timeline selection
You can also set options for series of navigator, like below:
navigator: {
series: {
...,
colorByPoint: false,
color: 'grey'
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/c4j9dvqx/
API Reference: https://api.highcharts.com/gantt/navigator.series.color
Related
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
I'm using Vizframe component where there is two lines, when I try to show the Datalabel, the modifications is applied to both lines, I want to apply it just to one of them (A line with Datalabel set to True and a line with DataLabel set to False.)
Here's how it looks
This is how I change DataLabel property:
plotArea: {
dataLabel: {
visible: false
},
},
Well I know that this question might be older, but I had a similar issue recently. You can use the renderer function to customize the data labels to your needs.
For me, it worked, when I checked the context data for the correct measure and decide then, if I return nothing, which shows the label normally or return an empty DOM node.
dataLabel: {
visible: true,
style: {
color: "#000"
},
renderer: function (ctx) {
var node = document.createElement("text");
if (ctx.ctx.measureNames === "Optimum") {
var text = document.createTextNode("");
node.appendChild(text);
return node;
}
}
},
As you can see in the picture below, the label for the orange line (Optimum) is gone.
You can hide the values when they are overlapped using this:
plotArea: {
dataLabel: {
visible: true,
hideWhenOverlap: true
}
}
Julian's answer is useful yet in order for the change to take effect on the document we need to attach the returned node to the parent data point node.
The renderer function does not provide data regarding the graph itself but only the selected label, which leaves us clueless on how to render the node effectively.
Something like this would make me happier:
renderer: function(...) {
var parent = document.getElementById(some_given_data_point_id);
parent.appendChild(text_node);
return parent;
}
Using vue-chartjs is it possible to change to color of the bar?
This is similar to this question which is based on chart.js
chart.js bar chart color change based on value, and the jsfiddle provided in the answer is exactly what I'm looking for, except within vue-chartjs.
Any help appreciated
So this should be your chart calling (in my case, I named it bar-chart)
<bar-chart
:chart-data="barData"
:options="barChartOptions">
</bar-chart>
:chart-data and :options are 2 props defined when I create my bar component:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
So your barData, should be an object like this:
{datasets: [...], labels: [...]}
Your dataset is an array with the charts you want to show. So if you want to show only 1 data, than your array only has one position. So let's assume that by now. We'll use dataset = dataset[0]
Your dataset accepts some properties, 2 of them are a must:
Data (an array with the data you want to show)
Label (the name of the label when you hover on the bardata. It should display "Label: value"
It also accepts some other properties like:
fill
hoverBackgroundColor
backgroundColor
check more here: https://www.chartjs.org/docs/latest/charts/bar.html
so now, your backgroundColor property is either a color value (e.g. red, #FF0000), or an array.
If it is an array, then this should be true dataset.bgColors.length === dataset.data.length
and each dataset.bgColors array position is the color of the respective value in the dataset.data array.
dataset: {
data: [1,2,-3,-4,2,1]
backgroundColor: ['green', 'green', 'red', 'red', 'green', 'green']
...
}
So now, you can just build a bgColors array with the color you want, based on your data.
------------- UPDATING THE DATA -----------------
To anybody else who is looking for a way to UPDATE your chart data after it was rendered. It's a different question, but to help the community:
When you set your chart component, you can define a watch for the chartData prop, so when the chartData changes, the method is called and you re-render the chart:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
methods: {
renderLineChart () {
this.renderChart(this.chartData, this.options)
}
},
mounted () {
this.renderLineChart()
},
watch: {
chartData: function () {
this.$data._chart.destroy()
this.renderLineChart()
}
}
})
IMPORTANT: Make sure you make a new copy of the new chartData object info because the watch will only check if the object itself changed, not its inner properties.
However, if you really want to change ONLY the dataset.data or dataset.backgroundColor or any other, than the watcher will not know it changed. You can use the property deep: true in the watcher for this, as it will check changes deep inside the chartData object:
watch:
chartData: {
handler: function () {
this.$data._chart.destroy()
this.renderLineChart()
},
deep: true
}
}
I hope the answer was clear for everyone.
Best regards
Is there any way to make google charts tooltip always visible, no matter where the mouse pointer is?
it should be constantly on after page load
The best I could come up with is:
http://jsfiddle.net/xDfLd/
But if you interact with the chart (ie, click on different pie segments, or different line segments), the tooltip will disappear. Setting enableInteractivity:false I'll file a bug that tooltips and selections should still display when interactivity is off anyway.
I combined what Jeremy posted with Yasen's comment and came to this solution:
var options = {
enableInteractivity: false,
selectionMode: 'multiple',
tooltip: {
trigger: 'selection'
}
};
google.visualization.events.addListener(chart, 'ready', function(e) {
var selected_rows = [];
for (var i = 0; i < your_total_number_of_rows - 1; i++) {
selected_rows.push({row: i, column: null});
}
chart.setSelection(selected_rows);
});
chart.draw(data, options);
This shows all the tooltips on load and prevents the user from messing around with them. Works great with the Pie Chart.
Use tooltip: { trigger: 'selection' } when defining options for the chart.
I'm using the following piece of code to display a set of bar charts in jqPlot. However, I am getting 2 problems:
There is no padding on either side of the range values for the xaxis. The pad attribute seems to have no effect.
When the number of bars is large, the bars overlap on top of each other. The barPadding attribute seems to have no effect.
I looked at this link Having problems with jqPlot bar chart . The answer suggested there was to use a CategoryAxisRenderer. But since I'm using time-series data, I require the DateAxisRenderer.
Please help.
function plotBarGraph(data,myticks,series)
{
$("#placeholder").empty();
$.jqplot('placeholder',data,
{
//stackSeries:true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
barMargin:1,
barPadding:0.5
},
axes:
{
xaxis:
{
ticks:myticks,
tickInterval:10,
renderer:$.jqplot.DateAxisRenderer,
pad:2.5,
tickOptions:
{
formatString:'%d-%m-%y'
}
}
},
legend:
{
show:true,
labels:series
}
});
}
In this case if you do not want to use the approach mentioned in the link, you might want to play with min/max values for your date axis.
I think you might also find useful the approach to a similar sort of problem with padding where I chose to set ticks on creation and hide the unwanted ones after the plot is drawn.
Before I can be of any further assistance please provide a sample presenting your problem.
For your second problem, I ran into a similar issue. I set up a selection statement that widened the size of my chart depending on how many bars would be in it. I then made the parent div scrollable (called "dataHolder"), and that solved the problem.
// set div properties depending on how many sets of data are in the
//array so the view is sized properly
$("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings
$("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings
if (dataArray.length > 10) {
$("#chartDiv").css("width", "1600px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
} else if (dataArray.length > 6) {
$("#chartDiv").css("width", "1200px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
}
I found a solution to use Date data with CategoryAxisRenderer. You have to configure de xaxis like follows:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.DateTickRenderer,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString:'%d/%m'
}
}
}
}
I hope it helps! ;)