{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: JSCharting","description":"The latest articles on DEV Community by JSCharting (@jscharting).","link":"https:\/\/dev.to\/jscharting","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F313167%2F664bbf94-1b44-4366-9352-fdd5715f1096.png","title":"DEV Community: JSCharting","link":"https:\/\/dev.to\/jscharting"},"language":"en","item":[{"title":"50 chart types for data visualization explained","pubDate":"Tue, 07 Mar 2023 17:19:34 +0000","link":"https:\/\/dev.to\/jscharting\/50-chart-types-for-data-visualization-explained-1f5g","guid":"https:\/\/dev.to\/jscharting\/50-chart-types-for-data-visualization-explained-1f5g","description":"

Charts are a powerful tool for data visualization, but with so many chart types available, it can be overwhelming to choose the right one. To help, we've compiled a list of the top 50 chart types. From basic to complex, this list covers a wide range of options and is sure to provide valuable insights and inspiration for your next project. Let's dive in!<\/p>\n\n

\n \n \n Area chart<\/a>\n<\/h2>\n\n

\"Area<\/a><\/p>\n\n

An area chart represents data as an area between a line and a baseline. It is used to show how values change over time.<\/p>\n\n

\n \n \n Area spline chart<\/a>\n<\/h2>\n\n

\"Area<\/a>
\nAn areaspline chart is a type of chart that displays data points connected by a curved line, which is then filled with a color or pattern to create an area between the line and the x-axis. It is useful for displaying trends over time or comparing multiple data series.<\/p>\n\n

\n \n \n Bar chart<\/a>\n<\/h2>\n\n

\"Bar<\/a><\/p>\n\n

A bar chart represents data as rectangular bars of different lengths. It is used to compare values across categories.<\/p>\n\n

\n \n \n Dumbbell chart<\/a>\n<\/h2>\n\n

\"Dumbbell<\/a><\/p>\n\n

A Dumbbell chart is a type of chart that shows the values of a dataset using two connected bars that resemble a dumbbell. <\/p>\n\n

\n \n \n Box and whisker plot<\/a>\n<\/h2>\n\n

\"Box<\/a><\/p>\n\n

A box and whisker plot is a type of box plot that shows the median, quartiles, and outliers of a dataset.<\/p>\n\n

\n \n \n Bubble chart<\/a>\n<\/h2>\n\n

\"Bubble<\/a><\/p>\n\n

A bubble chart represents data as bubbles of different sizes. It is used to show the relationship between three variables.<\/p>\n\n

\n \n \n Calendar chart<\/a>\n<\/h2>\n\n

\"Calendar<\/a><\/p>\n\n

A calendar chart, also known as a heatmap calendar, is a type of chart that displays data points in a calendar-like format, typically by using color to represent different values. Each cell in the calendar represents a day, week, or month, and the color of the cell indicates the value of the data for that time period. Calendar charts are often used to show patterns and trends over time, such as seasonal fluctuations or changes in behavior.<\/p>\n\n

\n \n \n Candlestick chart<\/a>\n<\/h2>\n\n

\"Candlestick<\/a><\/p>\n\n

A candlestick chart is a financial chart that shows the opening, closing, high, and low prices of a security.<\/p>\n\n

\n \n \n Choropleth map<\/a>\n<\/h2>\n\n

\"Choropleth<\/a><\/p>\n\n

A choropleth map is a type of map that shows the distribution of a variable across geographic regions using different colors or shades.<\/p>\n\n

\n \n \n Circular column chart<\/a>\n<\/h2>\n\n

\"Circular<\/a><\/p>\n\n

A circular column chart is a type of bar chart that uses a circular layout to show the values of a dataset.<\/p>\n\n

\n \n \n Circular gauge<\/a>\n<\/h2>\n\n

\"Circular<\/a><\/p>\n\n

An activity ring gauge often nested to compare separate values for progress throughout a period. Uniquely circular gauges have targets at 100% and can overlap themselves to visualize values greater than 100%.<\/p>\n\n

\n \n \n Clustered bar chart<\/a>\n<\/h2>\n\n

\"Clustered<\/a><\/p>\n\n

A clustered bar chart is a type of chart used to display data points as horizontal bars grouped together by category, where the length of each bar corresponds to the value of the data it represents. The chart is created by plotting the data on a graph with the y-axis representing the categories being compared and the x-axis representing the values being measured. Clustered bar charts are commonly used to compare data across different categories, where multiple data series are compared side-by-side within each category.<\/p>\n\n

\n \n \n Clustered column chart<\/a>\n<\/h2>\n\n

\"Clustered<\/a><\/p>\n\n

A clustered column chart is a type of chart used to display data points as vertical bars grouped together by category, where the length of each bar corresponds to the value of the data it represents. The chart is created by plotting the data on a graph with the x-axis representing the categories being compared and the y-axis representing the values being measured. Clustered column charts are commonly used to compare data across different categories, where multiple data series are compared side-by-side within each category.<\/p>\n\n

\n \n \n Column chart<\/a>\n<\/h2>\n\n

\"Column<\/a><\/p>\n\n

A column chart displays data as vertical bars of varying heights where each bar corresponds to the value of the data. It's commonly used for comparing data across categories or showing changes in data over time.<\/p>\n\n

\n \n \n Combo chart<\/a>\n<\/h2>\n\n

\"Combo<\/a><\/p>\n\n

A combo chart combines two or more types of charts to show different aspects of a dataset.<\/p>\n\n

\n \n \n Donut chart<\/a>\n<\/h2>\n\n

\"Donut<\/a><\/p>\n\n

A donut chart is similar to a pie chart, but it has a hole in the center. It is used to show the proportion of each category in a dataset.<\/p>\n\n

\n \n \n Dual-axis chart<\/a>\n<\/h2>\n\n

\"Dual-axis<\/a><\/p>\n\n

A dual-axis chart is a type of chart that shows two sets of data using two different scales on the same chart.<\/p>\n\n

\n \n \n Error column chart<\/a>\n<\/h2>\n\n

\"Error<\/a><\/p>\n\n

An error column chart is a type of chart that shows the variability of a dataset using error bars on a column chart.<\/p>\n\n

\n \n \n Euler chart<\/a>\n<\/h2>\n\n

\"Euler<\/a><\/p>\n\n

An Euler chart is a type of chart used to represent the relationships between different sets of data, typically in the form of circles or arcs that show the overlap or intersection between different categories or groups. Euler charts are often used in mathematics and logic to illustrate set theory and other abstract concepts.<\/p>\n\n

\n \n \n Funnel chart<\/a>\n<\/h2>\n\n

\"Funnel<\/a><\/p>\n\n

A funnel chart is a type of chart that is often used in sales and marketing to represent the stages in a process or customer journey. It is called a funnel chart because its shape resembles a funnel, with a wide top and a narrow bottom. The top of the chart represents the initial stage, while the bottom represents the final stage. Each section of the funnel represents the number of people or items that progress to the next stage, with the number decreasing as the stages progress. Funnel charts are often used to identify areas where potential customers drop off in the sales or marketing process, and to optimize the process to improve conversions.<\/p>\n\n

\n \n \n Gantt chart<\/a>\n<\/h2>\n\n

\"Gantt<\/a><\/p>\n\n

A Gantt chart is a bar chart used to show a project schedule. It shows the start and end dates of different tasks.<\/p>\n\n

\n \n \n Gauge charts<\/a>\n<\/h2>\n\n

\"Gauge<\/a><\/p>\n\n

\"Gauge<\/a><\/p>\n\n

Gauges are types of charts that show values as pointers on a circular dial. They are used to show the current status of a system or process.<\/p>\n\n

\n \n \n Heatmap Chart<\/a>\n<\/h2>\n\n

\"Heatmap\"<\/a><\/p>\n\n

A heatmap is a matrix that uses color to represent values. It is used to show patterns in data. Or Heatmap: A heatmap represents data as a color-coded grid. It is used to show how values change across two dimensions.<\/p>\n\n

\n \n \n Line chart<\/a>\n<\/h2>\n\n

\"Line<\/a><\/p>\n\n

A line chart represents data as a series of points connected by lines. It is used to show trends over time.<\/p>\n\n

\n \n \n Linear gauge<\/a>\n<\/h2>\n\n

\"Linear<\/a><\/p>\n\n

A linear gauge is a type of chart used to display a single value within a defined range, typically in the form of a horizontal or vertical bar with a pointer or marker indicating the value on a scale. The gauge can be used to represent various types of data, such as temperature, weight, or financial metrics. Linear gauges are often used in dashboards or other monitoring applications to provide a quick, at-a-glance view of key metrics.<\/p>\n\n

\n \n \n Marimekko chart<\/a>\n<\/h2>\n\n

\"Marimekko<\/a><\/p>\n\n

A Marimekko chart is a type of stacked bar chart that shows the proportion of each category within a larger category.<\/p>\n\n

\n \n \n Microcharts<\/a>\n<\/h2>\n\n

\"Microcharts\"<\/a><\/p>\n\n

A microchart is a type of chart used to display a small amount of data in a compact and easy-to-read format, typically with a small number of data points and minimal visual elements. Microcharts are often used in dashboards or other monitoring applications to provide quick insights into key metrics.<\/p>\n\n

\n \n \n Mosaic plot<\/a>\n<\/h2>\n\n

\"Mosaic<\/a><\/p>\n\n

A mosaic plot is a type of treemap that shows the proportions of different categories within each rectangle. <\/p>\n\n

\n \n \n Organizational chart<\/a>\n<\/h2>\n\n

\"Organizational<\/a><\/p>\n\n

An organizational chart is a type of chart used to represent the structure of an organization, typically in the form of a hierarchical diagram that shows the relationships between different positions or departments. Organizational charts are often used to illustrate reporting relationships or to clarify the roles and responsibilities of different positions within an organization.<\/p>\n\n

\n \n \n PERT chart<\/a>\n<\/h2>\n\n

\"PERT<\/a><\/p>\n\n

A PERT chart (Program Evaluation and Review Technique) is a type of chart used to plan and manage complex projects, typically in the form of a network diagram that shows the dependencies between different tasks or activities. PERT charts are often used to identify critical paths and potential bottlenecks in a project schedule.<\/p>\n\n

\n \n \n Pictogram chart<\/a>\n<\/h2>\n\n

\"Pictogram<\/a><\/p>\n\n

A pictogram chart is a type of chart used to represent data using icons or pictures, typically in a grid or matrix format. Pictogram charts are often used to convey information in a visually appealing way, such as in infographics or other forms of data visualization.<\/p>\n\n

\n \n \n Pie chart<\/a>\n<\/h2>\n\n

\"Pie<\/a><\/p>\n\n

A pie chart represents data as slices of a pie. It is used to show the proportion of each category in a dataset.<\/p>\n\n

\n \n \n Population pyramid<\/a>\n<\/h2>\n\n

\"Population<\/a><\/p>\n\n

A population pyramid is a type of chart that shows the age and gender distribution of a population. <\/p>\n\n

\n \n \n Radar chart<\/a>\n<\/h2>\n\n

\"Radar<\/a><\/p>\n\n

A radar chart represents data as a polygon with several vertices. It is used to show the performance of different categories across multiple dimensions.<\/p>\n\n

\n \n \n Radial column chart<\/a>\n<\/h2>\n\n

\"Radial<\/a><\/p>\n\n

A radial column chart is a type of radar chart that shows data as columns radiating out from the center of a circle.<\/p>\n\n

\n \n \n Radial chart<\/a>\n<\/h2>\n\n

\"Radial<\/a><\/p>\n\n

A radial chart represents data as a series of points on a circle. It is used to show how values change over time. <\/p>\n\n

\n \n \n Scatter plot<\/a>\n<\/h2>\n\n

\"Scatter<\/a><\/p>\n\n

A scatter plot represents data as a collection of points. It is used to show the relationship between two variables.<\/p>\n\n

\n \n \n Slope chart<\/a>\n<\/h2>\n\n

\"Slope<\/a><\/p>\n\n

A slope chart is a type of line chart that shows changes in data between two points in time. <\/p>\n\n

\n \n \n Sparkline chart<\/a>\n<\/h2>\n\n

\"Sparkline<\/a><\/p>\n\n

A sparkline chart is a type of small, simple chart that displays data trends in a single row or column, typically without axes or labels. Sparkline charts are often used to show trends or patterns in data over time or to compare multiple data points at a glance.<\/p>\n\n

\n \n \n Spider chart<\/a>\n<\/h2>\n\n

\"Spider<\/a><\/p>\n\n

A spider chart is a type of radar chart that shows the performance of different categories across multiple dimensions.<\/p>\n\n

\n \n \n Spline chart<\/a>\n<\/h2>\n\n

\"Spline<\/a><\/p>\n\n

A spline chart is a type of chart that displays data points connected by a smooth curve, which is often used to show trends over time or to interpolate missing data. It is similar to a line chart but provides a more visually appealing and smooth representation of the data.<\/p>\n\n

\n \n \n Stacked area chart<\/a>\n<\/h2>\n\n

\"Stacked<\/a><\/p>\n\n

A stacked area chart is a type of area chart that shows the proportions of different categories as stacked areas.<\/p>\n\n

\n \n \n Stacked bar chart<\/a>\n<\/h2>\n\n

\"Stacked<\/a><\/p>\n\n

A stacked bar chart represents data as stacked bars. It is used to show the proportion of each category within a larger category.<\/p>\n\n

\n \n \n Stacked column chart<\/a>\n<\/h2>\n\n

\"Stacked<\/a><\/p>\n\n

A stacked column chart represents data as stacked columns. It is used to show the proportion of each category within a larger category.
\nStock chart: A stock chart is a type of candlestick chart that shows the performance of a company's stock over time.<\/p>\n\n

\n \n \n Treemap chart<\/a>\n<\/h2>\n\n

\"Treemap<\/a><\/p>\n\n

A treemap chart is a type of chart used to display hierarchical data in a rectangular layout, where each rectangle represents a node in the hierarchy and the size or color of the rectangle corresponds to the value of the data it represents. Treemap charts are often used to visualize data related to file sizes, website traffic, or market share, among other applications.<\/p>\n\n

\n \n \n Venn chart<\/a>\n<\/h2>\n\n

\"Venn<\/a><\/p>\n\n

A Venn chart is a type of chart used to show the relationships between different sets of data, typically in the form of overlapping circles or ellipses. Venn charts are often used to illustrate the intersections and differences between different groups or categories.<\/p>\n\n

\n \n \n Waffle chart<\/a>\n<\/h2>\n\n

\"Waffle<\/a><\/p>\n\n

A waffle chart, also known as a square pie chart, is a type of chart that shows the proportions of different categories using a grid of squares that are filled or unfilled according to the data values.<\/p>\n\n

\n \n \n Conclusion\n<\/h2>\n\n

Data visualization is a critical skill in today's data-driven world, and choosing the right chart type is an essential aspect of effective data communication. By exploring the top 50 chart types generated with a JavaScript chart library<\/a> I hope you have gained a deeper understanding of the various chart visualization options available and can more effectively choose the right one for your data. Whether you're creating a business report, a scientific publication, or a social media campaign, utilizing the right chart type can help you convey your message in a clear, concise, and visually compelling way.<\/p>\n\n","category":["javascript","webdev","datascience","design"]},{"title":"What's new in JavaScript Charting for 2023?","pubDate":"Wed, 22 Feb 2023 19:10:36 +0000","link":"https:\/\/dev.to\/jscharting\/whats-new-in-javascript-charting-for-2023-1edp","guid":"https:\/\/dev.to\/jscharting\/whats-new-in-javascript-charting-for-2023-1edp","description":"

\n \n \n Organizational chart vertical leaf point layout\n<\/h2>\n\n

<\/a>
\nYou can now optimize organizational chart layouts by stacking leaf points vertically. This can reduce the space required for the chart which is especially useful for larger organizational charts.
\n<\/p>\n\n

\n
{\n  defaultSeries: {\n    leafPointLayout: 'vertical'\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  New series and point defaultLeafPoint options\n<\/h2>\n\n
<\/a>
\nTo help you work more efficiently with hierarchical charts, you can apply point options to only leaf points (points without any points below them in the hierarchy) or only apply options to leaf points that descend from a specific parent.
\n<\/p>\n\n
\n
{\n  defaultSeries: {\n    defaultLeafPoint: {\n      color: 'blue'\n    }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Bullet Graphs and Charts\n<\/h2>\n\n
<\/a>
\nJSCharting supports a variety of bullet charts and graphs including bullet microcharts, full size bullet bars with targets and bullet graph dashboards.<\/p>\n
\n  \n  \n  Slope Graph Examples\n<\/h2>\n\n
<\/a>
\nWe enhanced the line chart to enable quick and easy slope graph creation. Slope charts are a compact visual ideal for dashboards and provide glanceable views comparing two points based on the slope of the line. Dual axis and category scale customization helps you create powerful slope charts that communicate values visually using a combination of labels, values and colors.<\/p>\n
\n  \n  \n  Dumbbell Charts\n<\/h2>\n\n
<\/a>
\nJSCharting 3.4 adds detailed Dumbbell chart examples (also known as known as DNA charts, barbell charts, gap charts or connected dot plots) including vertical dumbbell charts, multiple axis dumbbell charts and styled dumbbell segments.<\/p>\n
\n  \n  \n  Waffle Charts\n<\/h2>\n\n
<\/a>
\nJSCharting 3.4 expands our waffle chart examples including use within organizational chart nodes. Waffle charts visualize data or completion using a grid of dots, tiles or colored cells and provide quick comparisons across values.<\/p>\n
\n  \n  \n  New widget module with a simplified API\n<\/h2>\n\n
<\/a>
\nJSCharting 3.4 ships with a new widgets module that wraps a select set of charts with a simplified API. Combined with other smart optimizations, this makes simple dashboard style widgets more accessible without the steeper learning-curve of full featured charts.<\/p>\n
\n  \n  \n  Three widget module types\n<\/h2>\n\n
\"Image<\/a>
\nThe new widget module includes Circular, Linear, and BarColumn types.
\n<\/p>\n\n
\n
new JSCWidgets.Circular('div1', {\n  label: 'Signal Strength',\n  value: .75,\n  max: 1\n});\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Advanced widget labeling support\n<\/h2>\n\n
\"Image<\/a>
\nWidgets have 3 labels: value, label, and icon you can customize with different text and positions. This leverages the new improved shape label layout and positioning options with a simplified API.
\n<\/p>\n\n
\n
new JSCWidgets.Linear('div1',\n{\n  label: ['Walk', 'Run', 'Bicycle'],\n  value: [.54, .14, .94],\n  min: 0, max: 1,\n  iconPosition: 'left',\n  labelPosition: 'bottom left',\n  valuePosition: 'bottom right'\n});\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Ability to style widgets with CSS\n<\/h2>\n\n
\"Image<\/a>
\nTo improve widgets accessibility, we added support for styling widget text using CSS. Modify the provided CSS file to create new defaults or add new CSS to overwrite styling for specific widgets.
\n<\/p>\n\n
\n
.jsc-widget .linear .title{\n  font-weight: normal;\n}\n.jsc-widget .linear .value {\n  font-size: 35px;\n}\n#div1 .jsc-widget .linear .value {\n  font-size: 40px;\n}\n#div2 .jsc-widget .linear .value {\n  font-size: 30px;\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Widgets optimized for Dark or Light Modes\n<\/h2>\n\n
\"Image<\/a>
\nTo make widgets more flexible out of the box, we have defined default colors and color opacities to work on dark or light backgrounds automatically. This helps simplify the creation of dark mode user interfaces.<\/p>\n
\n  \n  \n  New axis maxTickCount property\n<\/h2>\n\n
\"Image<\/a>
\nIt is now easier to control the number of automatically generated axis ticks on a chart. Use the axis maxTickCount to specify the maximum number of ticks the axis should generate.
\n<\/p>\n\n
\n
{\n  yAxis: {\n    scale: { maxTickCount:5 }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Ability to center range tick grid lines\n<\/h2>\n\n
\"Image<\/a>
\nSometimes, you may want a grid line to center on a range tick. For example, having a category line up with a column.
\n<\/p>\n\n
\n
{\n  xAxis: {\n    defaultTick: {\n      gridLine: {\n        center: true, width: 'column'\n      }\n    }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Improvements to multiple gauge layout\n<\/h2>\n\n
\"Image<\/a>
\nWe enhanced the way multiple gauges and radars are laid out on a chart to make better use of the available space.<\/p>\n
\n  \n  \n  Improved shape label positioning\n<\/h2>\n\n
\"Image<\/a>
\nWe completed a significant overhaul of the shape label positioning algorithm to handle many labels in different positions more reliably.<\/p>\n
\n  \n  \n  New positions for shape labels\n<\/h2>\n\n
\"Image<\/a>
\nWe've added new shape label positions \u201cinside middle left\u201d and \u201cinside middle right\u201d enabling you to add labels to gauges with more unique combinations and alignments.
\n<\/p>\n\n
\n
{\n  defaultSeries: {\n    shapeLabel: {\n      placement: 'inside',\n      align:'left'\n      verticalAlign: 'middle'\n    }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Use color modifiers with axis marker labels\n<\/h2>\n\n
\"Image<\/a>
\nWe've improved axis marker label features to support relative color adjustments. Now you can set colors relative to other colors already defined such as marker colors.
\n<\/p>\n\n
\n
\/* Axis marker labels will use\n* marker color but darker. *\/\n{\n  defaultAxis: {\n    defaultMarker: {\n      label: { color: 'darken' }\n    }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Ability to disable automatic label wrapping\n<\/h2>\n\n
\"Image<\/a>
\nYou can now disable automatic label wrapping in all labels.
\n<\/p>\n\n
\n
{\n  defaultPoint: {\n    label: { autoWrap: false }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Reliably use maxWidth with labels\n<\/h2>\n\n
\"Image<\/a>
\nWant to limit label width? Use the maxWidth label option to reliably limit the width a label can be.
\n<\/p>\n\n
\n
{\n  defaultPoint: {\n    label: { maxWidth: 70 }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Label ellipsis text overflow support\n<\/h2>\n\n
\"Image<\/a>
\nWe added support for ellipsis text overflow. You can now disable wrapping, set a maxWidth and ellipsis overflow to reduce the possible size of a label in a clean way.
\n<\/p>\n\n
\n
{\n  yAxis: {\n    defaultTick: {\n      label: {\n        autoWrap: false,\n        maxWidth: 150,\n        overflow: 'ellipsis'\n      }\n    }\n  }\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Improved series.yAt(x) for ranged Y values\n<\/h2>\n\n
\"Image<\/a>
\nWe've extended support for the series.yAt(x) function. Previously it only interpolated single Y values; but, now it also interpolates between ranged y values.
\n<\/p>\n\n
\n
chart.series(0).yAt('2\/15\/2020');\n\/\/ -> [22.344827586206897, 40.793103448275865]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Want to try it for yourself? Download JSCharting Version 3.4<\/a><\/p>\n\n","category":["javascript","webdev"]},{"title":"What's New in JavaScript Charting?","pubDate":"Tue, 05 Apr 2022 16:16:43 +0000","link":"https:\/\/dev.to\/jscharting\/whats-new-in-javascript-charting-2ldl","guid":"https:\/\/dev.to\/jscharting\/whats-new-in-javascript-charting-2ldl","description":"
\n  \n  \n  Widget charts for dashboards\n<\/h2>\n\n
<\/a>
\n15 new dashboard widget chart examples from linear gauge to columns and bars, circular gauge with icons to full bleed area lines, typographic widgets and line chart widgets with change indicators help you quickly and easily build custom chart dashboards.<\/p>\n
\n  \n  \n  Pictogram charts and pictographs\n<\/h2>\n\n
<\/a>
\nJSCharting\u2019s integrated icon support provides a huge selection for pictogram charts and graphs. Pictogram bars and percentage charts combined with strong typography create glanceable charts that convey their data quickly and easily. <\/p>\n
\n  \n  \n  Ability to set multiple parents and connector styles per data\n<\/h2>\n\n
<\/a>
\npoint
\nWe enhanced the point.parent property to help you define multiple parents and connector line styling for each parent independently.
\n<\/p>\n\n
\n
parent:[\n{id: 'p1', line: {color: 'green'}},\n{id: 'p2,p3', line: {color: 'red'}}\n]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Gantt chart critical path support\n<\/h2>\n\n
<\/a>
\nNew connector styling support for Gantt charts lets you customize and highlight a Gantt chart\u2019s critical path.<\/p>\n
\n  \n  \n  Define axis categories\n<\/h2>\n\n
\"Define<\/a>
\nWe added a new axis.categories property so you can define data point category names only once and have more control over the sort order. For convenience, you can specify an array of y values for the series.points property.<\/p>\n\n
Before
\n<\/p>\n\n
\n
series: [\n{name: 'Series 1',\npoints: [{x: 'A', y: 5}, {x: 'B', y: 10}]\n}, {name: 'Series 2',\npoints: [{x: 'A', y: 15}, {x: 'B', y: 20}]\n}]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
After
\n<\/p>\n\n
\n
xAxis_categories: ['A', 'B'],\nseries: [\n{name: 'Series 1', points: [5, 10]},\n{name: 'Series 2', points: [15, 20]}]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Right-angle or straight organizational connector lines\n<\/h2>\n\n
\"Right-angle<\/a>
\nWe enhanced how organizational connector lines appear by drawing them at right angles by default. You can use the straight option to change this default and draw connector lines directly between points.
\n<\/p>\n\n
\n
type: 'organizational straight'\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\"Synchronize<\/a><\/p>\n\n
\n  \n  \n  Synchronize organizational node widths and heights\n<\/h2>\n\n
We added point.annotation.syncWidth and syncHeight properties to help you control the sizing and visual balance of organizational chart nodes.
\n<\/p>\n\n
\n
defaultPoint_annotation: {\n\/\/ syncWidth: true == syncWidth_with: 'level'\nsyncWidth_with: 'level',\nsyncHeight_with: 'all'}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Point hierarchy connector styling and selection\n<\/h2>\n\n
\"Point<\/a>
\nThere is now a way to select specific branches in an organizational or Gantt dependency chart using hierarchy path selectors. You can select all branches from a point up the hierarchy, down the hierarchy, up and down, or between two points. For example
\n<\/p>\n\n
\n
\/\/ All branches from pointID up the hierarchy.\n['pointID', 'up']\n\/\/ All branches from pointID down the hierarchy.\n['pointID', 'down']\n\/\/ All branches from pointID up and down.\n['pointID', 'both']\n\/\/ All branches between pointA and pointB.\n['pointA', 'pointB']\n\/\/ A specific branch of points.\n['pointA', 'pointB', 'pointC']\n\/\/ Multiple branches and selectors.\n[['pointA', 'pointC'], ['pointC', 'up']]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Use the chart.connectors() function with path selectors to style the connecting lines. The chart.connectors() function lets you get a list of paths based on the selection, modify the connector line styling for specific paths, and reset connector styling to the original style.
\n<\/p>\n\n
\n
\/\/ Styles all connector lines from pointA up the hierarchy\nchart.connectors(['pointA', 'up'], {color: 'red'});\n\/\/ Reset all previously applied styling from pointA up the hierarchy\nchart.connectors(['pointA', 'up']);\n\/\/ Reset all line styling previously applied by this function\nchart.connectors();\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Ability to use hierarchy selectors to get points\n<\/h2>\n\n
\"Ability<\/a>
\nIn addition to styling connector lines using path selectors, you can use them to get a collection of all points included in the selected paths. For example, this applies the selected state to all points within the [\u2018pointA\u2019, \u2018up\u2019] branches.
\n<\/p>\n\n
\n
chart.series()\n.points(['pointA', 'up'])\n.options({selected: true})\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  New point.connectorLine property\n<\/h2>\n\n
\"New<\/a>
\nYou can now specify organizational or Gantt chart connector line styling per data point, or as a default for all points.
\n<\/p>\n\n
\n
defaultPoint_connectorLine:\n{color: 'blue', width: 2})\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  New connector line radius option\n<\/h2>\n\n
\"New<\/a>
\nWe added a connector line radius property to control the rounded corners of organizational connector or Gantt dependency lines. You can also provide an array of two radii for the chart to apply a different radius for each corner along the line.
\n<\/p>\n\n
\n
defaultPoint_connectorLine: {radius: 5}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Radius for each corner.
\n<\/p>\n\n
\n
defaultPoint_connectorLine: {radius: [0,5]}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Point getParents() and getChildren() functions\n<\/h2>\n\n
\"Point<\/a>
\nNeed to manually traverse data points in an organizational chart? Now you can use the getParents() and getChildren() point functions to get collections of points immediately up or down the hierarchy tree.
\n<\/p>\n\n
\n
chart.series()\n.points(0)\n.getChidren()\n.each(p => console.log(p.name));\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Linear gradients for  tags\n<\/h2>\n\n
\"Linear<\/a>
\nDid you know icons can be used inside any chart labels? JSCharting 3.3 now lets you define rich gradient fills for these icons by specifying a list of colors and an angle as shown below.
\n<\/p>\n\n
\n
label_text:\n'<icon name=[name] fill=#c41111,#ec5a5a,90>'\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Dynamic gradients\n<\/h2>\n\n
\"Dynamic<\/a>
\nWe expanded gradient color handling with color adjustment values to help you define gradient colors more easily. After you specify a first gradient color, you can set the rest to any of the color adjustment values.
\n<\/p>\n\n
\n
label_text:\n'<icon name=[name] fill=#c41111,lightenMore,90>',\nfill: ['#c41111', 'lightenMore', 90]\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Dynamic gradients for area chart fill\n<\/h2>\n\n
\"Dynamic<\/a>
\nWe\u2019ve expanded dynamic gradient support to the series.shape.fill property. You can set all gradient colors in this property to an adjustment value, including \u2018currentColor\u2019 which refers to the series color.
\n<\/p>\n\n
\n
defaultSeries_shape_fill:\n['currentColor', 'white', 90] or\n['currentColor', 'lightenmore', 220]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Dynamic gradients for data point fills\n<\/h2>\n\n
\"Dynamic<\/a>
\nYou can now use color adjustment values in data point fill gradient colors.
\n<\/p>\n\n
\n
defaultPoint_fill: ['currentColor', 'white', 90]\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Dynamic label outline color\n<\/h2>\n\n
\"Dynamic<\/a>
\nJSCharting improves legibility by intelligently selecting data point label colors that contrast with their background. When text overlaps areas such as connector lines, fills or gradients, you can use a text outline with an adjustment value color. This adjustment is based on the automatically selected label color.
\n<\/p>\n\n
\n
defaultPoint_label:\n{outline: {color: 'contrast'}}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Sync grid line width with columns\n<\/h2>\n\n
\"Sync<\/a>
\nWe added support to set axis tick grid line width to 'column' in all axis scale types. You can use this with crosshairs, which are axis ticks, or to style column charts to look like progress bars.
\n<\/p>\n\n
\n
xAxis_crosshair:\n{enabled: true, gridLine_width: 'column'}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Data object paths for nest()\n<\/h2>\n\n
JSCharting now includes support for object property paths in nest key() and rollup() functions. You can use this utility to process your data into groups and extract complex details to visualize on charts.
\n<\/p>\n\n
\n
let dataGroupedByRoles = nest()\n  .key('attributes.role')\n  .entries(myData);\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Map Zoom Button Position\n<\/h2>\n\n
JSCharting 3.3 allows you to modify the default map zoom buttons position.
\n<\/p>\n\n
\n
toolbar_items_zoom_position: 'inside top right'\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Next.js Support\n<\/h2>\n\n
This release includes fixes and enhancements enabling JSCharting to work in the Next.js environment.<\/p>\n\n
\n  \n  \n  Other\n<\/h2>\n\n