🇺🇸United States @andileco

andileco → created an issue.

OK, I've added a video of how to make a chart with a chart attachment. Apologies for the lack of voice in the video. Let me outline the steps:

1. Add a view of Charts Usage Statistics content type, with the initial display being a page.
2. Add a field to hold the value (in this case, I choose "7.x")
3. In the Format section, select a chart with "Title" as the label and "7.x" as the data provider.
4. Preview to make sure it works
5. Now add a "Chart attachment" display. I chose to "Clone as chart attachment" to save a little time.
6. Configure your chart attachment as needed, remembering to select "This display" for everything, INCLUDING the format (the form where you select "Chart" versus "Table" or "Unformatted list). In my case, I added an "8.x" field and in the chart settings selected that as the data provider. I also used a column for this display instead of a line.
7. Make sure you "Attach" your attachment to the Page display.
8. Preview your attachment to make sure it works.
9. Toggle to the Page display: you should see both your main chart and the chart attachment.

If you follow these directions and still have an issue, can you either post a video here like I did (I made this with Slack) or send me a DM (@andileco) on the Drupal Slack workspace?

Can one of you share which library you are using and what chart types you are wanting? Then I can make a video showing what to do.

To be honest, I lost track. I think this should definitely be reviewed, though. Thanks for working on this module!

matthews → credited andileco → .

andileco → created an issue.

It's already committed to Charts dev, so you would just need to require drupal/charts:dev-5.1.x and then apply the User Interface changes mentioned in the ticket.

Hi @sirclickalot, have you seen this issue and tried this solution already? https://www.drupal.org/project/charts/issues/3532198 ✨ Highcharts dark mode support and styledMode Active

Did you save Highcharts in the Charts Default Settings form (under Config > Content Authoring)? Or any other details you can provide? I am having trouble recreating the issue. Thank you!

Thank you for your work on this, @stefan.korn! I know you haven't marked this as "Needs review" yet, but I see an issue and wanted to suggest an alternative approach.

Before I do that: the issue is that I looked into the other charting libraries that are bundled in the Charts module, and it seems like most don't actually have a lot of styling options for title and subtitle, including font size. Highcharts, which is probably the reason the title_font_size key exists, no longer has a title font size option in their API because the library automatically adjusts the font size based on the amount of text and the size of the chart.

So, I don't want to add fields where they don't do anything and the user thinks something is broken when in actuality the field was just for a different charting library. These types of fields DO exist in the module (e.g. "Make the chart three-dimensional"), but only for historical reasons, and I have unwritten plans to remove them in a later version.

What I think you should do is refactor at least some of your code into the "addBaseSettingsElementsOptions()" method in Chartjs.php (you may need to add it, but you can look to Highcharts.php for an example of how to do so). This will make the settings for title/subtitle font size appear as soon as "Chart.js" has been selected as your library. There's a video about this here: https://www.linkedin.com/posts/daniel-cothran-43878218_drupal-charts-dat... and there are several recent issues about it, too: https://www.drupal.org/project/charts/issues/3458753 ✨ Add support for PieChart colorAxis options Active , https://www.drupal.org/project/charts/issues/3528781 ✨ Add StackLabel option for Highcharts Active , and https://www.drupal.org/project/charts/issues/3493686 🐛 Billboard and C3 not using custom colors for Pie or Donut charts Active .

Please let me know what you think!

Quick question...did you try dev? Also, what base field did you use for your media type?

Thank you for this report, @jonathan_hunt. I like this approach. I'm working on this!

@catch - I created it. This approach works for me. I didn't *find* any files in my site that contained "use strict" outside of a function.

andileco → created an issue.

I agree we shouldn't show that button if it's not applicable. I would be interested in a setting/property on libraries where they can define whether or not they support this option, and then if they don't, that's what determines if the checkbox shows or not.

By the way: the color-changer code isn't part of any library - it's custom to this module - so I would like to actually add the color changer on more libraries as a longer-term goal.

Thank you for your recent contributions, @stefan.korn! Would you be willing to do a quick assessment of which libraries support setting the title font size? If it's not available with all of them, we may want to do something similar to the other issue you worked on with the color changer.

OK, now C3.js is addressed too. @superfedya, please copy the D3 repository in the updated README file and then overwrite it in your composer.json. Run composer require --prefer-dist c3js/c3:0.7.20 d3/d3:4.9.1 and your d3 library should now contain d3.min.js.

Whoops, I did this for Billboard.js (a fork of C3.js). Need to replicate the solution for C3.js, which uses an older version of D3.

This is fixed thanks to @ivan zugec, who shared the solution in a streamed tutorial about the Charts module: https://www.youtube.com/live/ANzw3y8maFk?si=-CTj0j3T9Zvaa4dV&t=1827

andileco → made their first commit to this issue’s fork.

Thank you! Committed.

andileco → made their first commit to this issue’s fork.

andileco → created an issue.

That's fine, was just trying to have a single place where all the optional libraries are toggled on and off. I'll take a look at the updated MR tomorrow my time.

Thanks for clarifying. I think we need the option to bring in the library or some sort of validation that prevents users from doing something they're not going to like. What about like one of these, except it says, "Enabled styledMode" (with a link to more info)?

If I disable styled mode, then I actually get a nice, dark-mode chart.

This is very cool and thanks for this write-up and patch! When I use your MR, I am getting a black, infinite-scrolling box where the chart should be (see uploaded screenshare video). Did you experience this? Do you have any other configurations in your site?

andileco → created an issue.

andileco → created an issue.

andileco → created an issue.

andileco → created an issue.

andileco → created an issue.

andileco → created an issue.

andileco → created an issue.

andileco → made their first commit to this issue’s fork.

Sorry this took me a while. I was concerned about the effect this change might have on people who have existing monochrome pie charts. I added a checkbox at /admin/config/content/charts (Billboard.js or C3.js settings) that, if checked, will allow people to go back to the monochrome charts. I suspect, however, that people prefer having different colors per slice.

andileco → made their first commit to this issue’s fork.

Closing because this was a support request and there hasn't been activity for 2 years.

andileco → made their first commit to this issue’s fork.

andileco → created an issue.

andileco → created an issue.

This was my third time making use of the library_type_options, and I realized that the initial implementation--though working--was a little clunky. This refactoring (plus the addition of the stackLabels) tightens things up a bit.

andileco → created an issue.

I've attached a quick screenshare showing how to configure this on a chart-by-chart basis. By the way, you first need to visit /admin/config/content/charts > "Highcharts settings" and check the "Enable 'Color Axis' library" box for this to work.

andileco → created an issue.

Thanks for the fix, @nikathone, and thanks for testing, @yospyn!

andileco → made their first commit to this issue’s fork.

Moving to the drilldown module to have it create a field formatter.

This is fixed in https://www.drupal.org/project/charts/issues/3510411 📌 Re-structure Highcharts libraries so that Highcharts "modules" are their own Drupal libraries Active

Thanks, @nikathone!

Looking into this for 2.0.x.

Closing because Web Widgets was never ported beyond Drupal 7.

Looking good from my end. @nikathone, can you review?

Thank you for commenting, @fox mulder! Can you share more details of your set-up so I can figure out how to recreate the error myself?

Using patch #33 on Drupal 11.1.5. Works nicely if I use a custom formatter and (for my use case) set the format to "Y". If I try to use the "Default" formatter and select "HTML Year (2025)", I get the following in the dblog and the values do not show in my rendered view.

Deprecated function: strtr(): Passing null to parameter #1 ($string) of type string is deprecated in Drupal\views\Plugin\views\query\MysqlDateSql->getDateFormat() (line 76 of /app/web/core/modules/views/src/Plugin/views/query/MysqlDateSql.php)

#0 /app/web/core/includes/bootstrap.inc(108): _drupal_error_handler_real(8192, 'strtr(): Passin...', '/app/web/core/m...', 76)
#1 [internal function]: _drupal_error_handler(8192, 'strtr(): Passin...', '/app/web/core/m...', 76)
#2 /app/web/core/modules/views/src/Plugin/views/query/MysqlDateSql.php(76): strtr(NULL, Array)
#3 /app/web/core/modules/views/src/Plugin/views/query/Sql.php(1890): Drupal\views\Plugin\views\query\MysqlDateSql->getDateFormat('storage__field_...', NULL)
#4 /app/web/modules/contrib/views_date_format_sql/src/Plugin/views/field/ViewsDateFormatSqlField.php(217): Drupal\views\Plugin\views\query\Sql->getDateFormat('storage__field_...', NULL)
#5 /app/web/core/modules/views/src/ViewExecutable.php(1433): Drupal\views_date_format_sql\Plugin\views\field\ViewsDateFormatSqlField->query(true)
#6 /app/web/core/modules/views/src/ViewExecutable.php(1342): Drupal\views\ViewExecutable->_build('field')
#7 /app/web/core/modules/views/src/ViewExecutable.php(1451): Drupal\views\ViewExecutable->build(NULL)
#8 /app/web/core/modules/views/src/ViewExecutable.php(1514): Drupal\views\ViewExecutable->execute(NULL)
#9 /app/web/core/modules/views/src/Plugin/views/display/DisplayPluginBase.php(2493): Drupal\views\ViewExecutable->render()
#10 /app/web/core/modules/views/src/ViewExecutable.php(1722): Drupal\views\Plugin\views\display\DisplayPluginBase->preview()
#11 /app/web/core/modules/views_ui/src/ViewUI.php(615): Drupal\views\ViewExecutable->preview('attachment_1', Array)
#12 /app/web/core/modules/views_ui/src/ViewPreviewForm.php(63): Drupal\views_ui\ViewUI->renderPreview('attachment_1', Array)
#13 /app/web/core/lib/Drupal/Core/Entity/EntityForm.php(107): Drupal\views_ui\ViewPreviewForm->form(Array, Object(Drupal\Core\Form\FormState))
#14 /app/web/core/modules/views_ui/src/ViewFormBase.php(42): Drupal\Core\Entity\EntityForm->buildForm(Array, Object(Drupal\Core\Form\FormState))
#15 [internal function]: Drupal\views_ui\ViewFormBase->buildForm(Array, Object(Drupal\Core\Form\FormState), 'attachment_1')
#16 /app/web/core/lib/Drupal/Core/Form/FormBuilder.php(528): call_user_func_array(Array, Array)
#17 /app/web/core/lib/Drupal/Core/Form/FormBuilder.php(370): Drupal\Core\Form\FormBuilder->retrieveForm('view_preview_fo...', Object(Drupal\Core\Form\FormState))
#18 /app/web/core/lib/Drupal/Core/Form/FormBuilder.php(625): Drupal\Core\Form\FormBuilder->rebuildForm('view_preview_fo...', Object(Drupal\Core\Form\FormState), Array)
#19 /app/web/core/lib/Drupal/Core/Form/FormBuilder.php(321): Drupal\Core\Form\FormBuilder->processForm('view_preview_fo...', Array, Object(Drupal\Core\Form\FormState))
#20 /app/web/core/lib/Drupal/Core/Controller/FormController.php(73): Drupal\Core\Form\FormBuilder->buildForm(Object(Drupal\views_ui\ViewPreviewForm), Object(Drupal\Core\Form\FormState))
#21 /app/web/core/modules/layout_builder/src/Controller/LayoutBuilderHtmlEntityFormController.php(39): Drupal\Core\Controller\FormController->getContentResult(Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\RouteMatch))
#22 [internal function]: Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult(Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\RouteMatch))
#23 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array(Array, Array)
#24 /app/web/core/lib/Drupal/Core/Render/Renderer.php(593): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#25 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(121): Drupal\Core\Render\Renderer->executeInRenderContext(Object(Drupal\Core\Render\RenderContext), Object(Closure))
#26 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array)
#27 /app/vendor/symfony/http-kernel/HttpKernel.php(183): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#28 /app/vendor/symfony/http-kernel/HttpKernel.php(76): Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object(Symfony\Component\HttpFoundation\Request), 1)
#29 /app/web/core/lib/Drupal/Core/StackMiddleware/Session.php(53): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#30 /app/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#31 /app/web/core/lib/Drupal/Core/StackMiddleware/ContentLength.php(28): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#32 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(116): Drupal\Core\StackMiddleware\ContentLength->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#33 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(90): Drupal\page_cache\StackMiddleware\PageCache->pass(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#34 /app/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Drupal\page_cache\StackMiddleware\PageCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#35 /app/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#36 /app/web/core/lib/Drupal/Core/StackMiddleware/AjaxPageState.php(36): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#37 /app/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\Core\StackMiddleware\AjaxPageState->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#38 /app/web/core/lib/Drupal/Core/DrupalKernel.php(709): Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#39 /app/web/index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request))
#40 {main}

Thank you for testing, @yospyn!

Moving this to 5.1.x.

Nevermind, @nikathone, sparing you the documentation!

This was committed, so marking fixed.

This is looking good. Can I ask you to update the issue summary, @nikathone?