All Activity

This stream auto-updates     

  1. Today
  2. Customize Legend

    Hi Samtes, In FusionCharts, when a legend has a large number of items, you can mention the number of rows and columns the legend should display, so that all legend items can be displayed accordingly. You may adjust the number of rows and columns accordingly. Please refer to this fiddle for the implementation: Documentation Link: Hope this will help. Thanks, Srishti Jaiswal
  3. Yesterday
  4. Last week
  5. Customize Legend

    If I have multiple legends that are more that the current legend window can show, currently there is this scroll up and down arrow that shows up which is very difficult to use. Is there a way to customize that?
  6. Create plot custom label

    Hi Shira, In FusionCharts Area2D chart, you can highlight a specific data point or value by customizing the anchor properties. You can also add images to the anchor by using "anchorImageURL" attribute and for displaying any custom text you can use "displayValue" attribute under the individual data object. Please refer to this fiddle for the implementation: Note: Due to cross domain security restrictions it is advised to use an image from the same domain name as your charts. Documentation Link: Hope this will help. Thanks, Srishti Jaiswal
  7. Zoomline chart with gradient

    Hi Shira, As of now, FusionCharts do not support applying gradient to the area under the line plot of the Zoom Line chart. Please note : It is a specialized line chart, and line visualization does not support this feature of area coloring. Hope this will help. Thanks, Srishti Jaiswal
  8. Create plot custom label

    Hi Can I create a custom pin (using image or svg) and show it in a specific value?
  9. Is there an option to use the zoomline chart with gradients? same as in the attached image?
  10. Earlier
  11. Different gradients for each chart bar

    Hi Shira, In FusionCharts Bar2D chart you can provide different color to individual data plots ( bars ) by specify the HEX color code in the "color" attribute under the individual "data" objects. Also, you can apply gradient globally to all the bars by enabling the "usePlotGradientColor" chart attribute and you can apply gradient color using the "plotGradientColor" chart attribute. Please refer to this link for implementation: As of now, FusionCharts do not support applying different gradient color to the individual data plots. Documentation Link: Hope this will help. Thanks, Srishti Jaiswal
  12. Bar chart columns width

    Hi, To set the plot width please use plotSpacePercent or maxBarHeight at the chart object level.
  13. Bar chart columns width

    How can I change my bar width? I can't find it anywhere... I want to make it thinner Thanks
  14. Can I design my bar chart with different gradient colors for each bar? for example: the first bar will be a gradient of red & white and second, will be purple & blue? In my chart, I managed to create gradients but it didn't let me give the second bar different colors Thanks
  15. Close in on Locality Adape

    Thank you, Very good stuff! Best Essay writing vehicle navigation systems
  16. Hi, Please import fusioncharts.powercharts.js to resolve the problem import FusionCharts from 'fusioncharts'; import PowerCharts from 'fusioncharts/fusioncharts.powercharts'; import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; import ReactFC from 'react-fusioncharts'; ReactFC.fcRoot(FusionCharts, PowerCharts, FusionTheme);
  17. Hello everyone, I am new to FusionCharts and I am currently working on implementing a multilevelpie chart. I added the dataSource into state so that I can manipulate it later and I am simply rendering it. All I am seeying is "Loading chart. Please wait" and it doesn't change. I already tried verifing the location of the js files in the nodes_modules and I installed flash_player but nothing has changed. The code is in the App.js file. and the screen shot of what I am seeying . Node version: 12.16.2 Could you please me to solve this problem. thank you App.js
  18. Weird chart behaviors

    Hi, 1. and 2. The updating data to the chart is working fine, with the previous rendered data and adding the new ones to the right of the canvas. Check this showcased sample for reference : Please refer to the code reference in the above link to implement accordingly in your implementation. 3. 4. and 5. These are not supported attributes of FT charts. Please check the supported list of configuration attributes of FT charts : 6. The dynamically updating chart using feedData() API method keeps adding from the right of the canvas and the data plots moves out from the other end. This is the intended feature, and cannot be disabled to stop the plots to move out since when number of data values constantly being fed into a chart, it can slow down browser performance, or even cause a browser crash. To avoid this, use the optional chart level attribute timeSpread, to specify the total time interval you want to display in the chart at a given instant. Documentation for reference : Thanks, Akash.
  19. Hi, here are couple of problems I'm having with fusioncharts timeseries: 1) When timeseries chart is having historic data it deletes them from the chart on the first live update (see images 1-3) 2) After first couple of live updates the graph is empty and then resumes normal drawing (see images 1-3) 3) "plotHighlightEffect": "fadeout" , doesnt work (there is no highlighting when mouseover legend, nor mouse over individual line). 4) Ancors are not displayed. Setting attribute "drawAnchors" to 1 doesnt make any difference. 5) Setting attributes useMessageLog: "1" and showRTMenuItem: "1", also doesnt work. 6) How to show all data points on the graph (without deletion of the oldest one on the left)? And define lets say to display 1000 points on current live view? Graph source code: <script> const schema = [{ 'name': 'Date', 'type': 'date', 'format': '%Y-%m-%d %H:%M:%S' },{ 'name': 'Current', 'type': 'number' },{ 'name': 'Temperature', 'type': 'number' },{ 'name': 'Mixer speed', 'type': 'number' }]; const chartData = [ ["2020-10-10 08:59:00","1","20", "40"], ["2020-10-10 09:00:00","2","23", "40"], ["2020-10-10 09:01:00","4","27", "40"], ["2020-10-10 09:02:00","8","31", "40"], ["2020-10-10 09:03:00","14","45", "40"], ["2020-10-10 09:04:00","14.25","65", "40"], ["2020-10-10 09:05:00","14.44","67", "40"], ["2020-10-10 09:06:00","16.50","75", "40"], ["2020-10-10 09:07:00","18.90","80", "40"], ["2020-10-10 09:08:00","17.80","81", "40"], ["2020-10-10 09:09:00","15.50","74", "40"], ["2020-10-10 09:10:00","14.75","65", "40"], ["2020-10-10 09:11:00","14.70","63", "40"] ]; const fusionDataStore = new FusionCharts.DataStore(); const data = fusionDataStore.createDataTable(chartData, schema); const chartConfigs = { type: 'timeseries', width: '100%', height: '100%', dataFormat: 'json', renderAt: 'chartContainer', dataSource: { data: data, chart: { theme: 'candy', plotHighlightEffect: 'fadeout', multicanvas: true, useMessageLog: "1", showRTMenuItem: "1", exportenabled: 1, exportFormats: 'PDF=Export as PDF|PNG=Export as PNG|SVG=Export as SVG', exportfilename: 'smaticGraph_'+(new Date().toLocaleString()) }, caption: { text: 'Cooking process overview', position: 'left' }, subcaption: { text: '', position: 'left' }, yaxis: [{ plot: [{ value: 'Current', connectnulldata: true, type: 'line' }], orientation: 'left', format: { suffix: ' A' } }, { plot: [{ value: 'Temperature', connectnulldata: true, type: 'line' }], orientation: 'left', format: { suffix: ' °C' } }, { plot: [{ value: 'Mixer speed', connectnulldata: true, type: 'line' }], orientation: 'left', format: { suffix: ' rpm' } } ] } } var chart = new FusionCharts(chartConfigs); chart.addEventListener("rendered", function (_ref) { var chart = _ref.sender; chart.incrementor = setInterval(function () { if(chart.feedData){ //chart.feedData([['2020-10-01 01:12:00', Math.floor(Math.random() * 101), Math.floor(Math.random() * 101), Math.floor(Math.random() * 101)]]); chart.feedData([getGraphOverviewData()]); } }, 1000); }); chart.addEventListener("disposed", function(eventObj){ var chartRef = eventObj; clearInterval(chartRef.incrementor); }); chart.render(); </script> Data feeded to the graph with getGraphOverviewData() funstion is json, example: ["2020-10-10 10:45:13",2,55,43] Thank you for your help.
  20. Just Updated to 3.15.2 and clone() No Longer Working

    3.15.2 demo -
  21. Hello, is there a way to make a linear color gradient for a linear gauge. Attached is the current style of my chart. I understand there are "gaugeFillMix" and "gaugeFillRatio" properties for this, however I'm not sure how to use them for this situation. I would like to change the chart color from a solid green, to a gradient of white on the left side and becoming greener as it gets closer to the right side. Thank you
  22. Hello, attached is a gif of a FusionCharts linear gauge I am using. In the gif, we can see a card render with a title and education and then a few seconds later the FusionChart linear gauge appears with some salary information. I am using FusionCharts with react, and followed the tutorial for how to set up FusionCharts with react. Is there a reason for the delay? Is there any way to improve the time or work around it? Any help or explanation would be great, thank you Edit - If I set animations not to run, I get my preferred outcome for the linear gauge to appear quicker. "animation": "0" The transitions do look nice and appealing, would there be way to speed up that animation transition, or at least the initial render?
  23. Just Updated to 3.15.2 and clone() No Longer Working

    How can I do that using the I don't see a way to include that version of the library.
  24. Hi, If you have a FusionCharts license please drop a mail to [email protected] with the error reference & license details. Meanwhile for a quick fix please check with 3.15.1
  25. Just Updated to 3.15.2 and clone() No Longer Working

    Please fork the demo and share the updated sample - I will take a look.
  26. Hi, Could you share a recorded video session of the above URL with the developer console open where the error is logged?
  1. Load more activity