Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?
http://jsfiddle.net/sKV9d/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem
chart.reflow();
If you remove the options width: 300, height: 200 like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
it will fill automatically the container.
Set minPadding and maxPadding to 0, see: http://jsfiddle.net/sKV9d/3/
I solved it by
window.dispatchEvent(new Event('resize'));
UPD:
remove width and height attributes.
add into .css the following code in order to adjust chart block to 100% of #container:
chart { width: 100%; height: 100%; }
2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):
chart: {
events: {
load: function(event) {
**event.target.reflow();**
}
}
},
See example http://jsfiddle.net/yfjLce3o/
just simply add CSS
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
Try this :
var height= $("#container").height();
var width= $("#container").width();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: width,
height: height,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue with Highcharts already reported here.
To handle this we can do something like mentioned above.
I was also facing the same problem so I have solved it by using
window.dispatchEvent(new Event('resize'));
after rendering my chart like :
this.chartData={
... //some required data object to render chart
}
Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
window.dispatchEvent(new Event('resize'));
If you do not provide width property to the chart, it should automatically get the width of the container.
So just remove the width from the chart and give the container width: 100% and that should work.
If you want a specific width, just change the container width to a specific size. The chart should still be 100% of that size.
JSFiddle
Example:
HTML
<div id="container">
<div id="chart"></div>
</div>
JS
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
CSS
#container {
width: 100%;
height: 200px;
}
use updateChart function and call chart.reflow() inside that function
scope.updatechart = function(){
scope.chart.reflow();
}
call updatechart method every 30 seconds using any refresh mechanism
I tested it, and it is working very well:
chart-tab is div, and contains high chart div, so you first need to define two DIVs, first for containing the chart('chart-container'), and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor') for adding the event for 'chart-tab' DIV on-change , and here is the function as follows:
new ResizeSensor($('#chart-tab'), function(){
if(chart){
var wid = document.getElementById('chart-tab').clientWidth;
var hei = document.getElementById('chart-tab').clientWidth;
chart.update({
chart: {
width: wid,
height: hei
}
});
}
});
You can make use of chart.update function from anywhere across your project.
Highcharts.charts.forEach(function (chart) {
chart.update({ chart: { width: some value } }, true, true, true);
})
In my case it was a loading issue that caused the chart container to be too narrow. If you make use of jQuery then load your chart like this
$(document).ready(function() {
let chart = Highcharts.stockChart('chart-container', {
[...]
}
}
Angular only:
if you are using angular-highchart library then remove style from your options and simple do this
<highcharts-chart
*ngFor="let stock of chartArray; let i = index"
[Highcharts]="Highcharts"
[constructorType]="'stockChart'"
[options]="stock.chartOption"
style="width: 100%; display: block"
>
</highcharts-chart>
style="width: 100%; display: block" here is the noticable part. Ignore the rest please
For me using Angular it was solved by moving setting the option in ngAfterViewInit!
Related
I'm using latest echarts and trying to put a rectangle on the canvas using graphic option.
We can set width and height of type: 'rect' by using Shape.width and Shape.height according to this documentation.
What I want to do is that I want to change that width and height of rectangle
by clicking on it (by implementing onClick event)
by dragging like in css 'resize' property to a div. Is this possible in echarts?
Here is the sample option code that I'm currently trying to implement. You can use it by replacing it here. The setter function setWidth() can change the value of width variable but Shape.width will not call getWidth() function again. There will not be a new render happening.
let width = 100;
function getWidth() {
return width;
}
function setWidth(value) {
width = value;
}
option = {
graphic: {
elements: [
{
type: 'rect',
draggable: true,
shape: {
x: 0,
y: 0,
width: getWidth(),
height: 100
},
style: {
fill: 'red'
},
onclick: function(e) {
setWidth(400)
}
}
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}
}
};
Echarts options are usually not dynamic. Which means that if you change any option, you'll have to call yourChartName.setOption(option) (doc).
function setWidth(value) {
option.graphic.elements[0].shape.width=value;
myChart.setOption(option);
}
Plotly.js allows you to specify a graph title, but there doesn't seem to be an option for specifying a longer description to be shown on hovering over the title.
So, I added a title attribute to the text element that encloses the title text, and then activated JQueryUI Tooltips on the page. But nothing seems to happen when I hover over the title. Here's how I added the title attribute and activated the tooltips:
$('div#myDiv g.g-gtitle > text.gtitle')[0].title = 'This is a long description that should show on hover over the title';
$( document ).tooltip();
I've also tried the following, which doesn't work either:
$('div#myDiv g.g-gtitle > text.gtitle').attr('title', 'This is a long description that should show on hover over the title');
$( document ).tooltip();
Full example code here: https://codepen.io/synaptik/pen/eKBYbE
Any idea how I can display a tooltip when hovering over the graph title?
I checked your code, Jquery-ui-tooltip is causing some problems when working together with plotly, I don't want to get into specifics, but basically, on hover a new element is getting added to the previous hover element.
This is my version of a solution for your question, plotly has set all the graph elements to pointer-events:none where no events will happen on those elements, so I disabled this using the CSS pointer-events: all, Also we need to wrap the graph inside a div and a span containing the contents of the tooltip, thus using javascript events mouseover and mouseout, we can hide/show the tooltip.
Please go through the below code and let me know if any doubts, also let me know if your issue is resolved, Thanks!
var data_x = ['2018-05-01', '2018-05-02', '2018-05-03', '2018-05-04', '2018-05-05', '2018-05-06', '2018-05-07', '2018-05-08', '2018-05-09'];
// data
var Data = {
type: 'scatter',
x: data_x,
y: [4, 2, -1, 4, -5, -7, 0, 3, 8],
mode: 'lines+markers',
name: 'Data',
showlegend: true,
hoverinfo: 'all',
line: {
color: 'blue',
width: 2
},
marker: {
color: 'blue',
size: 8,
symbol: 'circle'
}
}
// layout
var layout = {
title: 'My Title',
xaxis: {
zeroline: false
},
yaxis: {
range: [data_x[0], data_x[data_x.length - 1]],
zeroline: false
}
}
Plotly.plot('myDiv', [Data], layout);
$('#myDiv text.gtitle').on('mouseover', function(e) {
var hovertext = $('span.custom-tooltip');
var pos = e.target.getBoundingClientRect();
hovertext.css("left", (pos.left - (hovertext.width() / 2) + (pos.width / 2)) + "px");
hovertext.css("top", pos.top * 1.5 + "px");
hovertext.css("visibility", "visible");
})
$('#myDiv text.gtitle').on('mouseout', function(e) {
var hovertext = $('span.custom-tooltip');
hovertext.css("visibility", "hidden");
})
.wrapper {
position: relative;
}
.wrapper .custom-tooltip {
visibility: hidden;
display: inline;
width: fit-content;
position: absolute;
left: 0px;
right: 0px;
}
#myDiv text.gtitle {
pointer-events: all !important;
}
.wrapper .custom-tooltip.show {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plotly chart will be drawn inside this DIV -->
<div class="wrapper">
<div id="myDiv"></div>
<span class="custom-tooltip">This is a really long title</span>
</div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
Instead of using JQuery Tooltips, I went with Tippy. However, I still had to modify the Plotly chart like this (thanks to #Naren-Murali):
$('div#myDiv g.g-gtitle > text.gtitle').addClass('graphWrapperPointerEvents');
with the CSS:
.graphWrapperPointerEvents {
pointer-events: all !important;
}
Solution:
https://codepen.io/synaptik/pen/LrWMKM
I try to put Morris js donut chart in the flex container with 2 flex items, I expect that chart in flex: 1 container will resize, but it does not. Does anyone know how to make the chart to be responsive in flex item?
Here is my example example try to resize it
JS:
$(function () {
Morris.Donut({
element: 'container',
resize: true,
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
CSS:
html, body {
height: 100%;
margin: 0;
}
body {
display: -webkit-flex;
}
#container {
flex: 1;
}
.flex1 {
flex: 1;
border: 1px solid red;
}
Add a $(window).on('resize', ...) event handler then call the graphs redraw() function.
If there is a dynamic UI element that causes the layout to "flex" based on user input, you will want to call redraw() there as well as there is no way to directly listen for the resizing of a div.
Here is your fiddle, updated with the fix.
jsFiddle
Also, here is a note from a developer of Morris.js
Note: I suggest you call redraw() sparingly as it's quite an expensive operation. Try using a setTimeout trick or similar to avoid calling it for intermediate resize events.
A way to heed this advice is below:
$(window).on('resize', function() {
if (!window.recentResize) {
window.m.redraw();
window.recentResize = true;
setTimeout(function(){ window.recentResize = false; }, 200);
}
});
Here is a fiddle with this implemented:
jsFiddle
My solution is to listen to resize events. If you have any resize event in the past second, you resize the chart. In this way you can't miss any window resize.
var haveToResizeCharts = false;
$(window).resize(function() {
haveToResizeCharts = true;
});
setInterval(function(){
if(haveToResizeCharts) {
chart1.redraw();
chart2.redraw();
haveToResizeCharts = false;
}
}, 1000);
The answer of thedarklord47 is partially wrong because if you already have an resize in the past 200 miliseconds, the final resize has no effect!
I am trying to add programmaticallya string to the x axis, instead than declaring it in the chart creation.
So for example, I have my chart:
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: 'theYaxis'}
}
series: [1,2,3,4]
});
});
Now I want to change the yAxis title, so I create a small function; so it will look like this:
var titleY;
function loadme(){
$.get('names.csv', function(data){
var lines= data.split('\n');
titleY=lines[0].split(','[0];
});
}
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: titleY}
}
series: [1,2,3,4]
});
loadme();
});
This will result in the title being empty.
I am checking to be sure that the value is correctly retrieved, using console.log, and the value is collected and printed. What is wrong here? I get the same issue if I populate the $.get function with data that I want to add to the series in the chart: the data is never add to the chart, even if it is correctly retrieved.
I have created a demo fiddle to dynamically change y-axis title. Refer this JSFIDDLE
HTML:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">
JS (part of thec code to update the y-axis title on a button click):
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});
Refer Highcharts 'update' function documentation for further details.
You have two options:
use axis.setTitle() - good performance, I advice use that solution for setting title
use axis.update() - lower performance, because it recreates whole axis, while first method only changes title
Here is the settings of the pie chart:
function createChart(chartDataSource) {
$("#chart").kendoChart({
theme:$(document).data("kendoSkin") || "black",
title:{
text:"Efficiency"
},
legend:{
position:"bottom"
},
dataSource:chartDataSource,
series:[
{
type:"pie",
field:"val",
categoryField:"status"
}
],
tooltip:{
visible:true,
template:"${category} - #= kendo.format('{0:P}', percentage)#"
}
});
CSS style:
#chart {
width: 50%;
height: 50%;
}
I know that Highcharts has reflow boolean (reflow example in StackOverflow) did exactly what I want.
I am not sure whether kendoUI chart have the same reflow setting or I should play around with the CSS style. If go for CSS, how to make such setting?
Thanks
Applying my idea in your linked post, just hook the window resize event and redraw the chart:
$(window).resize(function()
{
var chart = $("#chart").data("kendoChart");
chart.refresh();
});
Working fiddle here.