Right now when I add title to chart its creating padding above the chart , how to make the title appear inside chart , thanks
chart.setTitle("title");
I tried padding on chart , this one hides the title.
chart.setTitle("title").setPadding({
bottom: 0,
right: 0,
top: -36,
left: 0
}).setMouseInteractions(false);
See https://lightningchart.com/lightningchart-js-api-documentation/v4.0.1/classes/ChartXY.html#setTitlePosition
ChartXY.setTitlePosition("series-left-top")
Related
I've created a shiny dashboard which have a number of tabs each with a few plotly charts set side by side. Because they are side by side, it can be difficult to look into an individual chart in detail without zooming in on the browser for the chart to fill up the page (even then for some reason the chart bobs up and down when zoomed in).
I was thinking surely there must be a way in Plotly to create a button that creates a popup window of the chart which can be made full screen? However, I've searched on Google and can't find anything relevant to plotly.
I did find this...
Shiny: plot results in popup window
This sort of pop-up window would suffice. But in this example the chart is only created on the pop-up window itself (and is an image rather than an interactive plot). What I would want to do in this case is mirror the chart on the main page, but I'm aware you calling the same output from two different parts of the UI doesn't work in Shiny.
Does anyone have any ideas on how to approach this?
No need to use a modal or any other additional components.
No need to render it twice.
We can solve this problem purely from front-end, no need of any sever handling.
Here is how We can do it with some CSS and js tricks:
library(shiny)
library(plotly)
ui <- fluidPage(
htmltools::htmlDependencies(icon("")),
tags$style(
'
.plot-zoom {
position: absolute;
border: none;
background-color: transparent;
bottom: 0;
right: 0;
}
.full-screen {
position: fixed;
height: 98vh !important;
width: 98vw !important;
left: 0;
top: 0;
z-index: 9999;
overflow: hidden;
}
'
),
div(
class = "plotly-full-screen",
column(6, plotlyOutput("p2")),
column(6, plotlyOutput("p1")),
),
tags$script(HTML(
"
function plotZoom(el){
el = $(el);
var parent = el.parent().parent();
if(el.attr('data-full_screen') === 'false') {
parent.addClass('full-screen').trigger('resize').fadeOut().fadeIn();
el.attr('data-full_screen', 'true');
} else {
parent.removeClass('full-screen').trigger('resize').fadeOut().fadeIn();
el.attr('data-full_screen', 'false');
}
}
$(function(){
$('.plotly-full-screen .plotly.html-widget').append(
`
<div style='position: relative;'>
<button onclick=plotZoom(this) class='plot-zoom' data-full_screen='false' title='Full screen'>
<i class='fa fa-expand-arrows-alt'></i>
</button>
</div>
`);
})
"
))
)
server <- function(input, output, session) {
output$p1 <- output$p2 <- renderPlotly(plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length))
}
shinyApp(ui, server)
I added a little button on the bottom-right of each plot. when it is clicked, the plot is zoomed to full screen and in full screen, click it again will go back to normal view.
how to use
All you need to do is place your plot components inside a parent or grandparent or grand-grand...parent component which has class = "plotly-full-screen".
Change the .plot-zoom style if you don't like the button position or color etc.
Another good thing is when you use the plotly screenshot button, this full screen button will not be included.
Include the style and script tags in your app. Usually you want to have the style close to the top (head) of your app and place the script after plot tags.
Before zoom
After zoom
Enjoy!
I am adding custom chart labels using setResultTableFormatter
line[key].setResultTableFormatter((builder, series, xValue, yValue) => {
return builder
.addRow(name)
.addRow(yValue.toFixed(2))
.addRow(timedata[xValue.toFixed(0)])
});
This is working fine in Dashboards with 4 charts.But if there is 6 charts in dashboard..Label is hiding to the right side , If i place cursor to right side of the page.PLease check below example.
Please use chart.setPadding to add padding on the problematic sides
chart.setPadding({ right: 60 })
I have a Vis.js timeline in an Angular5 project with three groups and multiple items/events in each. I figured out how to style each group background individually to make the alternating swim lanes more distinct, by doing:
.vis-background>.vis-group:nth-of-type(even) {
// there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
background-color: $gray-lighter;
}
.vis-labelset>.vis-label:nth-of-type(odd) {
background-color: $gray-lighter;
}
However, the vertical background grid lines are no longer visible in the groups that are colored gray. It's as if the group background color is layered on top of the grid lines. If I add a z-index: 1; to .vis-vertical or .vis-grid the lines and group color appear correctly, but I lose timeline zooming and movement functionality. How can I apply styling to groups, keep the vertical grid lines visible and also keep all timeline functionality?
A workaround I used that not resolves the problem, but made it less notorious, was define the group like this:
group=
{
id : 0,
content : 'My Group',
style : "background: rgba(82, 226, 233, 0.2);"
};
and define a background item like this
background_item=
{
group : 0,
start : '2018-10-29 00:00',
end : '2018-10-30 02:00',
type : 'background',
className : 'myClassName'
};
where the className come from this style:
.vis-item.vis-background.myClassName {
background-color: rgba(82, 226, 233, 0.2);
}
It uses transparency to prevent hide the vertical lines.
The result was something like this:
Hope it helps while someone found a definitive solution.
I'm using Flot horizontal bar chart.
The labels of the bars have font-size: smaller - inherited from the containing <div class="flot-text"> which holds the labels.
This breaks the positioning of the labels:
[![Flot bar chart Broken labels][1]][1]
So I need to do this
$(".tagChart .flot-text").css("font-size", ""); // Flot uses "smaller" which breaks alignment.
Which is a bit hacky. This doesn't work:
yaxis: {
// Otherwise Flot uses "smaller" which breaks alignment.
//font: { size: "14px", color: "black" }, // doesn't work
},
How am I supposed to prevent that smaller from being added? Also, interesting thing is that it doesn't appear elsewhere in the page in different DOM/CSS context.
EDIT: It seems that it could have something in common with Bootstrap's CSS rule which is inherited by its content:
table { font-size: 12; }
Try to keep all the label in same width(display:inline-block). Use text align right to align it on the same line
In my page, I have the below divs
<div><h2>Test</h2></div>
<div id="chart_div" style="width: 1200px; height: 600px;"></div>
I don't have any style, other than the default provided by bootstrap 3.
But the google chart is rendered with so much empty space at left (see the screenshot)
is there a way to fix this?
Fix Update :
As per davidkonrad suggestion, I added the below option in my chart
chartArea : { left: 30, top:30 }
Now it works
It is not caused by bootstrap - can easily reproduce the behaviour in a "fresh" bootstrap 3. It is caused by the enormous width of the container.
When chartArea is not defined, then chartArea.left, top, width and height is per default set to auto, which means the chart tries to center itself inside the container, both vertically and horizontally. You can observe that yourself by setting a border around the container. Set chartArea.left to force the chart-position where you want it, for example :
var options = {
chartArea : { left: 80 }
};
or
var options = {
chartArea : { left: "10%" }
};