I've looked here:
https://www.amcharts.com/docs/v4/reference/xycursor/
and tried this
chart.cursor.fontSize = "14";
chart.cursor.fill = am4core.color("#ff0000");
chart.cursor.fontFamily = "verdana";
To style the (default white on black) element when the xycursor touches the X/Y axis (don't know what the correct name for this element is, hope you know which one I mean)
I would like to set the font size and family. Tried to set the color to red to see if it has to be set via the fill property, but also that doesn't work.
Created the cursor like this:
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = axis;
You have to set the tooltip properties inside the axis objects directly, as mentioned in the documentation. For example, to change the font, size and color in the category axis tooltip, modify the tooltip's label object:
categoryAxis.tooltip.getFillFromObject = false;
categoryAxis.tooltip.label.fill = "#ff0000"
categoryAxis.tooltip.label.fontFamily = "Courier New"
categoryAxis.tooltip.label.fontSize = 15;
Demo
Related
I have been trying add custom inline styles for the cells where double underline is applied. My plan was to get the cell where the double underline is aplied and using its indexes find the currosponding td and then aplly custom style/tag.
Currently i am able to find the row and column indexes but if at all i find the row and colum index how can i find the currosponding td in the html string ?
Is there any way to find td using the row and column index ?
Is there any way to get this done, please let me know.
To apply a double underline border style to a cell / range by using the setBorder method with the LineStyle double and the borderBottom method
For example, to set a double underline to the cell A1:
window.onload = function (dashboard) {
// Initialize the Spread component with the following line:
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
// create line border
var border = new GC.Spread.Sheets.LineBorder();
border.color = "red";
// line style = double
border.style = GC.Spread.Sheets.LineStyle.double;
var cell = activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport);
// setting the border to the bottom
cell.borderBottom(border);
};
If you have any other questions feel free to reach out to the SpreadJS Support Team here: Submit a ticket
Best, Mackenzie Albitz | GrapeCity Technical Engagement Engineer
we are using amchart with a project and we need to remove all bars and zoom/resize action
Our final idea is to have exactly the same chart as this
https://mdbootstrap.com/docs/angular/advanced/charts/
with just right-click to save chart as image
is this possible?
I tried to set those variables
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
Lets say if you have two axes x and y as below, its is possible to disable the grid for each axis like below
let dateXAxis = chart.xAxes.push(new am4charts.DateAxis());
let valueYAxis = chart.yAxes.push(new am4charts.ValueAxis());
dateXAxis.renderer.grid.template.disabled = true;
valueYAxis.renderer.grid.template.disabled = true;
I have trouble getting TreeView in GTK3 to wrap text correctly.
I set it up to wrap in this way:
Gtk::TreeViewColumn* pColumn = mTreeView.get_column(2);
static_cast<Gtk::CellRendererText *>(pColumn->get_first_cell())
->property_wrap_mode().set_value(Pango::WRAP_WORD_CHAR);
static_cast<Gtk::CellRendererText *>(pColumn->get_first_cell())
->property_wrap_width().set_value(200);
This works, text is wrapped, but when I resize the window and make it bigger, there is a lot of ugly white-space above and below cell with long text. It seems, that GTK reserves height for cell based on wrap width. Which makes no sense to me.
I tried to get around with setting needed in signal_check_resize with calculating needed width like this:
Gtk::TreeViewColumn* pColumn = mTreeView.get_column(2);
auto width = this->get_allocated_width()
- mTreeView.get_column(0)->get_width()
- mTreeView.get_column(1)->get_width();
static_cast<Gtk::CellRendererText *>(pColumn->get_first_cell())
->property_wrap_width().set_value(width-100);
this->forceRecreateModel = true; //Needed to work
But this lets me only make window bigger. It cannot be shrinked, after it was resized.
The question is, how this is properly done?
I am using gtk3.20.3-1 and gtkmm3.20.1-1 on Arch linux.
EDIT: fixed typo in the title...
In the end I found how to do it.
In the setup of the window (for me constructor of the window derived class) it was necessary to set column to be AUTOSIZE in order to allow shrinking of the width.
//Last Column setup
{
mTreeView.append_column("Translation", mColumns.mEnglish);
Gtk::TreeViewColumn* pColumn = mTreeView.get_column(2);
pColumn->set_sizing(Gtk::TreeViewColumnSizing::TREE_VIEW_COLUMN_AUTOSIZE);
static_cast<Gtk::CellRendererText *>(pColumn->get_first_cell())
->property_wrap_mode().set_value(Pango::WRAP_WORD_CHAR);
}
Also there is needed to set correct wrap width on every resize. Without this, height of the row was as big as it would be necessary for currently set wrap_width with no regard on current width (resulting in big padding on the top, when stretched more and prohibiting to make window smaller).
This code was also in the constructor.
this->signal_check_resize().connect([this]()
{
//calculate remaining size
Gtk::TreeViewColumn* pColumn = mTreeView.get_column(2);
auto width = this->get_allocated_width()
- mTreeView.get_column(0)->get_width()
- mTreeView.get_column(1)->get_width()-30;
//minimum reasonable size for column
if(width < 150)
width = 150;
static_cast<Gtk::CellRendererText *>(pColumn->get_first_cell())
->property_wrap_width().set_value(width);
//debounce
static auto oldsize = 0;
{
oldsize = width;
//trigger redraw of mTreeView (by clearing and refilling Model,
//it is done in 100ms pulse)
this->mRedrawNeeded = true;
}
});
And maybe it is worth noting, that I have mTreeView encapsulated in Gtk::ScrolledWindow. So this is a chunk which comes before column setup. :)
//in class is: Gtk::ScrolledWindow mScrollForResults;
//scrolling area
mGrid.attach(mScrollForResults, 0,2,10,1);
mScrollForResults.set_hexpand();
mScrollForResults.set_policy(Gtk::PolicyType::POLICY_AUTOMATIC,
Gtk::PolicyType::POLICY_ALWAYS);
mScrollForResults.set_margin_top(10);
mScrollForResults.set_min_content_width(400);
mScrollForResults.set_min_content_height(200);
mScrollForResults.add(mTreeView);
//results treeView
mRefListStore = Gtk::ListStore::create(mColumns);
mTreeView.set_model(mRefListStore);
mTreeView.set_hexpand();
mTreeView.set_vexpand();
I'm trying to label the y-axis in a plot built using pango.
I'm unable to orient the text to run vertically up along the y-axis.
Relevant portion of code is:
#include <gtkmm.h>
Pango::FontDescription font;
cr->save(); // where cr is Glib::RefPtr<Cairo::Context> const &
cr->set_source_rgba(1.0,1.0,1.0,0.5);
font.set_family("Monospace");
font.set_style(Pango::STYLE_ITALIC);
font.set_weight(Pango::WEIGHT_BOLD);
font.set_absolute_size(20);
Glib::RefPtr<Pango::Layout> x_axis_label = this->create_pango_layout("x-axis label");
x_axis_label->set_font_description(font);
cr->move_to(0.38,0.465);
x_axis_label->show_in_cairo_context(cr);
// so far so good, renders as expected
// now trying to render the y-axis label
Glib::RefPtr<Pango::Context> t_y_axis_label_ctxt = x_axis_label->get_context();
Pango::Matrix p_matrix;
// apply some transformation
p_matrix.xx = 0.0;
p_matrix.xy = 1.0;
p_matrix.yx = 1.0;
p_matrix.yy = 0.0;
p_matrix.x0 = 0.0;
p_matrix.y0 = 0.0;
t_y_axis_label_ctxt->set_matrix(p_matrix);
Glib::RefPtr<Pango::Layout> y_axis_label = Pango::Layout::create(t_y_axis_label_ctxt);
y_axis_label->set_text("y-axis label"); // if this line of code is omitted I would expect, at least the text "x-axis label" to be rendered. But this does not happen.
y_axis_label->set_font_description(font);
cr->move_to(0.0,0.0);
y_axis_label->show_in_cairo_context(cr); // renders no output
cr->restore();
I suspect the problem has something to do with context that i retrieve from x-axis label, and the expected copy behaviour is not manifesting.
Are you sure you want to rotate the Pango context? I believe that functionality was introduced in the pre-Cairo days; now you would just rotate the Cairo context, like:
cr->save();
cr->rotate_degrees(90);
Glib::RefPtr<Pango::Layout> y_axis_label = this->create_pango_layout("y-axis label");
y_axis_label->set_font_description(font);
cr->move_to(...); // wherever you wanna put it
y_axis_label->show_in_cairo_context(cr);
cr->restore();
If you still don't see anything, make sure you are not moving the label out of the visible area.
I'm attempting to color disabled rows in a gtk tree view widget a light gray color. From what I've read, I'm supposed to set the background-gdk property of the corresponding cellrenderer and bind it to a model column. This sort of works.
Gtk::CellRendererText* textRenderer = manage(new Gtk::CellRendererText());
textRenderer->property_editable() = false;
Gtk::TreeViewColumn *col = manage(new Gtk::TreeViewColumn("Column1", *textRenderer));
col->add_attribute(*textRenderer, "background-gdk", m_treeview_columns.m_back_color);
my_treeview.append_column(*col);
Gtk::TreeModel::Row row;
for (int i = 0; i < NUMBER_OF_ROWS; iLane++){
row = *(treeview_liststore->append());
row[m_workListColumns.m_back_color] = Gdk::Color("#CCCCCC");
}
In the end though, I get only the cells colored properly. BUT I also get an ugly white-space in between the cells. Does anyone know of a way to fix this or a better way to achieve the effect I'm after?
Could you set the background of the row to match the cell background or set the bakground of the tree view all together ? Or maybe the cell with cell-background-gdk ?