In AmCharts v4, is it possible to change the color of the tooltip pointed by the arrow? I just want to change the color of the tooltip and not the guide line.
I am using the JSON approach to build the chart is that's relevant.
Thanks!
I've finally found a solution to this.
"chartCursor": {
"enabled": true,
"animationDuration": 0,
"color":"#000000",
"cursorColor": "#DDEAFB"
},
The key is the cursorColor property inside chartCursor. Also, the color property will let you change the font color inside the tooltip.
Related
I'm going to change the font color using a color picker and I added it like this. but it's not working now. I think It's because the'rte.exec()' please help me how to change the font color. Thank you.enter image description here
Inside init methodstrong text
grapesjs.init({
colorPicker: {
appendTo: 'parent',
offset: { top: 26, left: -166, },
},
});
I want to set the default color for the Kendo Editor's foreColor tool to "black". By default, the color is always "white".
DontVoteMeDown has a great answer! However as soon as you click the dropdown arrow on the colorPicker, you lose the currently selected color. You could save the current color to a variable and reload it each time the palette is opened. Then update the selected color on change:
var curForeColor = "#000000";
$("#editor").kendoEditor({
tools: [{
name: "foreColor",
}]
});
var colorpicker = $("div.k-i-foreground-color").data("kendoColorPicker");
colorpicker.value(curForeColor);
colorpicker.bind("change", function(){
curForeColor = colorpicker.value();
});
colorpicker.bind("open", function(){
colorpicker.value(curForeColor);
});
DEMO
Try this:
var editor = $("#editor").data("kendoEditor");
$(editor.toolbar.element)
.find("div.k-i-foreground-color")
.data("kendoColorPicker")
.value("#000000");
Demo
The foreColor tool is in fact a ColorPicker so you can set it's value as soon as editor is created.
Is there a way to create a custom color picker to change the editor's body background color? I looked at the documentation and it seems that the palette is just available for font color and text background color, not body background color.
You can change the background color of the editor using:
$("#editor").data("kendoEditor").body.style.backgroundColor = 'red'
All you need is to hook the select option on the color picker to set the editor's background color with the selected value.
$("#picker").kendoColorPicker({
value: "#ffffff",
buttons: false,
select: function(e) {
$("#editor").data("kendoEditor").body.style.backgroundColor = e.value;
}
});
See here for a sample: http://dojo.telerik.com/EYusEQ/2
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)