When I create a StackedColumns graph in dojo, the default tooltips show the cumulative value. I would like to show the individual value (or possibly both).
In my experience, when I have a series with first value: 2, and another with first value: 5, the tooltip shows 7 when hovering over the second series. I would like it to still show 5 (or possibly "value: 5, cumulative value: 7").
I found the following Q&A very useful. Phillipes jsFiddle example worked for the StackedArea, but I was unable to get it to work on StackedColumns.
Dojo StackedAreas chart doesn't accept objects as values
Appreciate any help.
Here is my code:
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedColumns", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Magnify", "dojox/charting/widget/SelectableLegend", "dojo/ready"],
function(Chart, Default, StackedColumns, Tooltip, Highlight, Magnify, SelectableLegend, ready){
ready(function(){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default",{type: "StackedColumns", gap: 2});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true, includeZero: true});
chart1.addSeries("A", [2,3,5,7,2,4,6], {plot: "default", fill: "blue", stroke: {color: "blue"}});
chart1.addSeries("C", [5,4,2,7,5,3,1], {plot: "default", fill: "green", stroke: {color: "green"}});
var tooltip = new Tooltip( chart1, "default", {
text : function(point) {
console.debug(point);
return "This is " + point.y;
}
});
chart1.render();
var clusteredColumnsLegend = new SelectableLegend({chart: chart1}, "chart1Legend");
});
});
I have created a new jsFiddle # http://jsfiddle.net/Tony_D/CqNhB/5/
This could maybe be considered as a bug, that said it is very easy to workaround just change your tooltip function by:
var tooltip = new Tooltip( chart1, "default", {
text : function(point) {
console.debug(point);
return "This is " + point.run.data[point.index];
}
});
Related
I want to draw a vertical line representing the current date on my gantt chart. Please help me.
I found this answer
https://stackoverflow.com/questions/55719235/draw-a-vertical-line-representing-the-current-date-in-amcharts-gantt-chart
but it works only in amcharts 4.
I found an answer to my own question:
inside the ready function we put:
function createRange(value) {
var rangeDataItem = xAxis.makeDataItem({
value: new Date('2023-02-04').getTime(),
above: true
});
var range = xAxis.createAxisRange(rangeDataItem);
rangeDataItem.get("grid").set("visible", true);
range.get("grid").setAll({
stroke: 'red',
strokeOpacity: 1,
width: 32,
location: 1
});
range.get("label").setAll({
fill: am5.color(0xffffff),
text: '05/02',
background: am5.RoundedRectangle.new(root, {
fill: '#aaa'
})
});
}
createRange();
it might solvemy own question hahahaha. 🤦♂️
I am developing a dashboard, and in it I have a chart with some sales rep data. Here's my code and an image.
//xhtml element:
<p:panel header="Oportunidades">
<p:barChart id="graficoOportunidadesRepresentante" model="#{dashboardBean.barModel}" style="width:100%; height:420px"/>
</p:panel>
//Bean generation method:
public void criaGraficoOportunidadesPorRepresentante() {
barModel = new BarChartModel();
ChartData data = new ChartData();
[...]
data.setLabels(labels); //comes from the related sales rep's name
barModel.setData(data); //backend fetches amounts from database
// Options
BarChartOptions options = new BarChartOptions();
CartesianScales cScales = new CartesianScales();
CartesianLinearAxes linearAxes = new CartesianLinearAxes();
linearAxes.setStacked(true);
cScales.addXAxesData(linearAxes);
cScales.addYAxesData(linearAxes);
options.setScales(cScales);
Title title = new Title();
title.setDisplay(true);
title.setText(labelGraficoOportunidadesAtivas);
options.setTitle(title);
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
barModel.setExtender("chartOportunidadePorRepresentanteExtender");
barModel.setOptions(options);
}
//Javascript extender:
function chartOportunidadePorRepresentanteExtender() {
var options = $.extend(true, {}, this.cfg.config);
options = {
options: {
plugins: {
labels: {
render: 'value',
position: 'inside'
}
},
title: {
fontSize: 16
}
}
};
$.extend(true, this.cfg.config, options);
};
I want the numbers on the bars to not render, because they are better legible on the element's tooltip, and are stacking on top of one another
as per this screenshot. AFAIK, label refers to the name of the rep, and each dataset also has a ".setLabel(String)" method that's rendering between the chart title and content. I've found some solutions refering to a "legend" property, but it de-rendered the so far called label property.
I've managed it. In the js extender:
labels: {
render: 'value',
fontSize: 0
}
I don't even know why I removed the "position: inside" value, I just did. fontSize = 0 hid the numbers.
// ignore this comment - required to post the following jsfiddle.net link!
Please see https://jsfiddle.net/68bf25vh/
If you click a doughnut segment, the corresponding tooltip displays, which is the correct functionality.
The problem is triggering this desired functionality when a user clicks one of the buttons below the doughnut. E.g. when a user clicks the 'Trigger Segment 1 Click' button. The tooltip should display above segment 1 (just as if the user had clicked segment 1).
A bonus would be having the tooltip displaying above segment 1 initially too, but not essential.
Any help much appreciated :)
Please note
Using Chart.js v 2.5.0. I've read a few articles suggesting to use a showTooltip() method, e.g. chart.showTooltip([chart.segments[0]], true); Unfortunately this method does not exist in this version.
Found this https://stackoverflow.com/a/37989832, but this displays all tooltips. Just want the tooltip of the active (current) segment to display.
You can use the following function to display corresponding tooltip, when clicked on an external button :
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
When calling the function, pass chart-instance and button-index as the first and second argument respectively.
BONUS :
To initially show the tooltip of segment-1, add the following config in your chart options :
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
* declare a variable named isChartRendered in global-scope and set it to false
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var isChartRendered = false;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3'],
datasets: [{
data: [10, 10, 10]
}]
},
options: {
events: ['click'],
cutoutPercentage: 70,
legend: {
display: false
},
tooltips: {
displayColors: false
},
onClick: function(evt, elements) {},
// BONUS: show segment 1 tooltip initially
animation: {
onComplete: function() {
if (!isChartRendered) {
showTooltip(myChart, 0);
isChartRendered = true;
}
}
}
}
});
$(document).on('click', 'button', function() {
var $this = $(this),
index = $this.index();
showTooltip(myChart, index);
});
function showTooltip(chart, index) {
var segment = chart.getDatasetMeta(0).data[index];
chart.tooltip._active = [segment];
chart.tooltip.update();
chart.draw();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:400px;height:400px;">
<canvas id="myChart"></canvas>
</div>
<div style="margin-top:50px;">
<button>Trigger Segment 1 Click</button>
<button>Trigger Segment 2 Click</button>
<button>Trigger Segment 3 Click</button>
</div>
For Chart.js 3 the GRUNT`s solution needs some modifications:
chart.tooltip.setActiveElements([{datasetIndex: 0, index: index}]);
chart.tooltip.update();
chart.render();
If you want to change also the segment style:
const activeSegment = chart.getDatasetMeta(0).data[index];
chart.updateHoverStyle([{element: activeSegment, datasetIndex: 0}], null, true);
I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?
Without chart option
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
};
chart.draw(data, options);
With:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: {
fill:'black',
stroke: 'white',
strokeSize: 1
},
chartArea: {
backgroundColor: {
fill: 'blue',
stroke: 'red',
strokeSize: 1
}
}
}
};
chart.draw(data, options);
Either way, graph looks like this:
The background color can be set using it like this. Read the documentation here
Edit your code like this
var options = {
displayAnnotations: true,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: 'blue',
chartArea: {
backgroundColor: '#FFF000',
},
},
fill: 50,
};
I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.
Working JSFIDDLE
I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.
I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.
Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!
Annotation Chart Fiddle
My Related SO Question
/* One time recoloring of background after SVG creation - for static charts */
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */
var observer = new MutationObserver(function(mutations) {
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
});
I am trying to find a way to completely change the color of a Kendo UI Bar Chart bar when it is hovered over. I do know that there is the series.highlight.color config option, but this seems to add only a tint in that color. I am wanting to completely replace the normal bar color with a different hover color. I have been pouring through the docs but can't seem to find a configuration option to do this even though it seems like there has to be a way to do this through Kendo config options without having to resort to hacking it.
Any help is much appreciated!
You can use the series.highlight.visual property to draw the bar with a solid color:
$("#chart").kendoChart({
series: [{
type: "bar",
data: [1, 2],
highlight: {
visual: function(e) {
var origin = e.rect.origin;
var bottomRight = e.rect.bottomRight();
var topRight = e.rect.topRight();
var topLeft = e.rect.topLeft();
var c = "green";
var bc = "#555";
var path = new kendo.drawing.Path({
fill: {color: c,opacity: 1,},
stroke: {color: bc,opacity: 0.7,width: 2,}
})
.moveTo(origin.x, bottomRight.y)
.lineTo(bottomRight.x, bottomRight.y)
.lineTo(topRight.x, topRight.y)
.lineTo(topLeft.x, topLeft.y)
.close();
return path;
}
}
}]
});
DEMO
Within the visual function you can get at the item and base the color on value or another field, etc.