Can it be done? I did a lot of research and couldn't find anything.
Thanks
It seems that there isn't any settings for that in the Chart API, but what when I inspected Telerik ASP.NET MVC demo page I found out the text element that is used on the title.
With some JavaScript you could change the title font size and color easily.
This is a jQuery example:
$('#chart').find('text:nth(0)').css('font-size', '30px').css('text', 'red')
First I'll get the chart control with id and then find the title which is the first text element. Then I'll place my own css styling.
This isn't the optimal way to do this and it is basically a hack, but if nothing else cannot be done then this might be your solution.
Have a different approach to this since we ran into the same thing but with trying to bold the title... Kendo MVC Chart API now gives you access to the font tag which it pushes into the style tag. Well what we did was just close that element and add our own element(s) to the style tag:
.Title(t => t.Text("My Chart Title").Font(";font-weight:bolder;"))
As you can see below it renders the style and in turn bolds the title text.
in razor page add this code for the category in chart
.CategoryAxis(axis => axis.Categories(model => model.MonthName)
.Labels(labels => labels.Font("tahoma").Color("red").Margin(15))
.Labels(labels => labels.Rotation(-90))
.MajorGridLines(lines => lines.Visible(true)))
))
Related
When putting multiple charts tooltips from charts are hidden behind others.
Also, I am using custom tooltips for this picture, the default tooltip also shows in the same way.
First, looks like you're using Canvas, maybe using the SVG version of your chart can help.
If it does not, you'll find more parameters for theming in this issue : https://github.com/plouc/nivo/issues/308
Then you will be able to set precisely zIndex
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
Designing a React application, what I want is having the title of a Card or Paper on the top border with some indention from left side, like this:
I searched a lot and couldn't find a generic way to do so. Should I create a customised component or there's way for this?
I don't know exactly what you want it to look like, but you can achieve something like that by using the fieldset and legend elements.
It might look like this:
<fieldset>
<legend>Current</legend>
// Content within border.
</fieldset>
Result:
This approach is used by Material-UI for the "Outlined" variant of TextField (demo here). The code that handles this aspect is the NotchedOutline component (source here).
You can also fairly easily do something yourself via a position attribute to move a title element up over the border. This would actually allow you to use one of those material-ui components to provide most of the styles, and then just move the title on to the border.
Checkout this Codepen for an examples: https://codepen.io/codingmatty/pen/bOXKpZ
I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.
Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.